Awesome GitHub RepositoriesViewport Intersection Events

Splide est une bibliothèque TypeScript agnostique aux frameworks pour créer des carrousels de contenu et des galeries d'images accessibles et tactiles. Elle fournit une implémentation sans dépendance de sliders qui supportent les interactions de glisser, balayer et flick sur navigateurs mobiles et desktop. La bibliothèque se distingue par une couche d'accessibilité complète utilisant les rôles ARIA et le support des lecteurs d'écran. Elle propose un système de points de rupture (breakpoints) responsive qui adapte les dimensions et le comportement des slides selon la largeur de l'écran, ainsi qu'un système de plugins pour étendre les fonctionnalités de base avec des composants personnalisés et des effets de transition. Le projet couvre un large éventail de capacités de mise en page et d'interaction, incluant des arrangements en grille, des dimensions de slides variables et des workflows de sliders synchronisés. Il inclut des optimisations de performance comme le chargement différé (lazy loading) des médias et le monitoring d'intersection avec la fenêtre d'affichage, ainsi qu'une navigation multi-modale via clavier, molette de souris ou vignettes. Des packages wrappers dédiés sont disponibles pour l'intégration dans diverses architectures de frameworks frontend.

Il s'agit d'une bibliothèque d'animation React fournissant une collection de composants pour créer des mouvements chorégraphiés, des transitions complexes et du morphing SVG. Elle fonctionne comme une spécification de design de mouvement et un système de wrapper d'animation de composants UI utilisé pour appliquer des transformations 3D, des courbes de Bézier et des transitions d'entrée-sortie aux éléments d'interface. Le projet inclut une suite d'animation pilotée par le défilement pour synchroniser les mouvements de l'UI et les effets de parallaxe avec la position de la fenêtre d'affichage, ainsi qu'un framework de mouvement SVG pour animer des chemins, dessiner des lignes progressivement et interpoler des coordonnées pour le morphing de formes. Ses capacités couvrent un large éventail de mouvements visuels, incluant des effets visuels 3D comme des carrousels rotatifs, le mouvement de visualisation de données pour l'interpolation numérique et des assemblages de pages d'atterrissage interactifs. Elle gère également des animations de composants complexes pour les tableaux et les listes, et fournit des outils pour séquencer et enchaîner des animations pour plusieurs éléments.

This project is a collection of experimental frontend prototypes, comprising a creative web layout gallery, a CSS user interface component library, and a visual experiment lab. It serves as an interactive animation showcase for holographic effects, audio-visual synthesis, and dynamic state transitions. The repository features specialized implementations of interactive media, including physics-based particle systems, real-time audio-visual synthesis, and an interactive sketching system. It also includes tools for content generation, such as text-based image reconstruction and a web-based prese

ScrollTrigger est une bibliothèque JavaScript et un gestionnaire d'événements de défilement DOM conçu pour exécuter des callbacks et basculer des classes CSS lorsque des éléments entrent ou sortent de la fenêtre d'affichage (viewport) du navigateur. Il fonctionne comme une interface de haut niveau pour l'API Intersection Observer et un système pour initier des transitions visuelles et des tâches asynchrones basées sur la position d'un élément par rapport au viewport. L'outil permet de définir des points de déclenchement précis en utilisant des offsets en pixels ou en pourcentage pour contrôler exactement quand les événements se déclenchent. Il gère les animations visuelles basées sur le défilement et les implémentations de chargement différé (lazy loading) en suivant les seuils de visibilité. La bibliothèque fournit des capacités de surveillance de l'activité de défilement, comme le suivi du début, de l'arrêt ou du changement de direction du défilement. Elle prend également en charge le déclenchement d'événements de viewport pour exécuter des fonctions personnalisées ou des promesses lorsque les éléments franchissent des coordonnées spécifiques.

Fixed-nav is a client-side JavaScript library for building responsive, touch-friendly navigation menus on single-page websites. It pins navigation bars to the screen viewport so control interfaces remain persistently accessible as users scroll through long content. The library automatically monitors scroll positions against document boundaries to highlight active section indicators in real time. When navigation links are selected, it animates viewport transitions to target sections using hardware-accelerated timing functions instead of abrupt jumps. Additional capabilities include dimming ba

React Parallax is a React animation component library that creates multi-speed scrolling background depth effects. It computes relative scroll positions within viewports to translate raw page offsets into normalized animation progress values, applying hardware-accelerated translation and scaling styles to DOM nodes for smooth visual movement. The library supports rendering background images and arbitrary visual elements that shift positions at different speeds relative to foreground content. It provides dynamic Gaussian blur filter transitions that interpolate based on current scroll velocity