Awesome GitHub RepositoriesCustom Scroll Triggers

Ce projet est une bibliothèque JavaScript native et un optimiseur de performance web conçu pour différer le chargement des images, vidéos et iframes jusqu'à ce qu'ils entrent dans la fenêtre d'affichage (viewport) du navigateur. Il agit comme un wrapper d'Intersection Observer et un chargeur de média adaptatif pour réduire les temps de chargement initial des pages et économiser la bande passante. La bibliothèque se distingue par la prise en charge des images réactives via srcset et les balises picture, ainsi que des images d'arrière-plan CSS et des SVG animés. Elle s'intègre aux attributs de chargement natifs du navigateur lorsqu'ils sont disponibles tout en fournissant des solutions de repli personnalisées pour les environnements non pris en charge. Elle peut également déclencher l'exécution de fonctions JavaScript spécifiques basées sur la visibilité des éléments. Les capacités étendues incluent la gestion des assets frontend avec prise en charge du ciblage de conteneurs de défilement personnalisés et l'observation de contenu dynamique pour les éléments injectés de manière asynchrone. L'utilitaire gère également la fiabilité du réseau via la gestion des erreurs de chargement des assets et annule les téléchargements actifs pour les éléments qui quittent la fenêtre d'affichage avant la fin.

Inertia is a server-driven frontend framework designed to create monolithic single page applications. It acts as a state synchronization protocol and client-side routing bridge, allowing developers to build interactive experiences using modern JavaScript component libraries while keeping routing and controllers on the server. This approach eliminates the need for a separate REST or GraphQL API layer by passing data from server controllers to frontend components as props via JSON payloads. The framework distinguishes itself by utilizing adapter-based integration to link various backend environ

Infinite Scroll is a JavaScript library that automatically loads and appends the next page of content when a user scrolls near the bottom of a container, or optionally when they click a button. It provides scroll-based pagination that fetches and inserts subsequent pages of content, with URL-driven content loading that determines next page URLs from selectors, templates, or custom functions. The library integrates with browser history, updating the URL and history state as new pages load while preserving scroll position so each page state is bookmarkable and refreshable. It is compatible with

elevator.js is a lightweight JavaScript library that adds a playful, elevator-themed scroll-to-top button to a webpage. When clicked, it smoothly animates the page back to the top while playing a looping elevator music track in the background, masking the transition and adding a whimsical touch to the user experience. The library goes beyond a simple scroll-to-top button by offering configurable scroll duration, the ability to scroll to any specified DOM element with optional vertical padding, and callback hooks that fire user-defined functions at the start and end of the animation. This allo

React Virtuoso is a React component library for rendering large datasets efficiently through virtualized lists, grids, tables, and chat interfaces. It automatically measures variable-height items at runtime, computes accurate scroll offsets without requiring fixed sizes, and renders only the items within the visible viewport plus a configurable buffer zone. The library manages scroll position through a state machine that tracks direction, position, and anchor items to handle auto-scroll, sticky headers, and bidirectional loading. The library distinguishes itself with specialized components fo

Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations. The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports

Ce projet est un composant de lazy loading React conçu pour améliorer la performance frontend en différant le rendu des éléments enfants jusqu'à ce qu'ils entrent dans la fenêtre d'affichage du navigateur. Il fonctionne comme un gestionnaire de cycle de vie des ressources et un déclencheur de visibilité, empêchant les montages inutiles de composants hors écran pour réduire les temps de chargement initial de la page et l'utilisation de la mémoire. La bibliothèque fournit une configuration pour les déclencheurs de visibilité, permettant l'utilisation de décalages personnalisés et de conteneurs de défilement spécifiques pour déterminer quand un composant se charge. Elle inclut des mécanismes pour gérer les cycles de vie des composants, permettant de choisir si un composant reste chargé après son apparition ou s'il est démonté en quittant la fenêtre d'affichage. Des capacités supplémentaires couvrent le rendu différé via l'utilisation de placeholders et l'optimisation de la gestion des événements pour les écouteurs de défilement et de redimensionnement. Le système prend également en charge la validation manuelle de la visibilité pour forcer les vérifications de fenêtre d'affichage ou exiger qu'un composant s'affiche.

Cette bibliothèque JavaScript de défilement fluide est un utilitaire frontend et un contrôleur de mouvement de viewport conçu pour animer les transitions vers des liens d'ancrage. Elle intercepte les clics de liens standard pour remplacer les sauts instantanés par un mouvement fluide vers les éléments cibles. La bibliothèque fournit des patterns d'accélération (easing) configurables et des contrôles de vitesse pour gérer l'accélération et la décélération. Elle inclut un mécanisme pour annuler immédiatement les animations actives et supporte le déclenchement de défilement programmatique via des appels de fonction directs. L'outil gère les offsets de positionnement pour éviter que le contenu cible ne soit caché derrière des en-têtes fixes et synchronise la barre d'adresse du navigateur pendant les transitions. Il dispose également d'un système de callback piloté par les événements qui déclenche des effets de bord lorsque les animations de défilement commencent, se terminent ou sont interrompues.

XRecyclerView est un composant de liste Android et une bibliothèque d'extension qui ajoute des comportements de « pull-to-refresh » et de défilement infini à un RecyclerView standard. Il sert d'élément UI mobile défilant conçu pour gérer des listes pilotées par les données avec prise en charge d'en-têtes et de pieds de page dynamiques. La bibliothèque fournit une interface basée sur les gestes pour déclencher le rechargement du contenu via un widget « pull-to-refresh » et implémente un mécanisme pour déclencher des rappels de récupération de données lorsqu'un utilisateur atteint le bas d'une liste pour permettre le défilement infini. Elle prend en outre en charge la gestion dynamique des en-têtes de liste et l'implémentation de flux de travail de chargement supplémentaire pour ajouter du nouveau contenu au fur et à mesure que l'utilisateur fait défiler.

SVPullToRefresh est une bibliothèque permettant d'ajouter des comportements de « pull-to-refresh » (tirer pour rafraîchir) et de défilement infini aux vues de défilement UIKit sur la plateforme iOS. Elle fournit des composants d'interface utilisateur spécialisés qui permettent le rafraîchissement manuel du contenu et la pagination au sein des vues défilantes. La bibliothèque implémente des mécanismes pour déclencher des actions de chargement de données lorsqu'un utilisateur tire une vue de défilement depuis le haut ou atteint le bas d'une zone défilante. Ces déclencheurs permettent de synchroniser les dernières informations ou d'ajouter du contenu pour créer des flux continus.

in-view est un détecteur de visibilité DOM et un wrapper d'intersection observer. Il sert de gestionnaire de transition de fenêtre d'affichage qui déclenche des rappels et des événements lorsque des éléments d'écran spécifiques entrent ou sortent de la fenêtre du navigateur. La bibliothèque fournit un système pour configurer les critères de visibilité en utilisant des décalages de pixels, des pourcentages ou des fonctions de test personnalisées. Elle inclut des utilitaires pour observer les changements de visibilité, effectuer des évaluations de visibilité manuelles et vérifier le statut actuel d'un élément au sein de la zone visible. Ces capacités soutiennent des patterns d'application tels que le chargement différé (lazy loading), le défilement infini, les animations pilotées par le défilement et l'analyse de l'engagement des utilisateurs.

Stellar.js est une bibliothèque JavaScript de parallaxe et un framework de mouvement basé sur le défilement, utilisé pour coordonner le positionnement des éléments DOM et les transformations CSS. Il fonctionne comme un outil de positionnement qui calcule les décalages de coordonnées en temps réel pour les images d'arrière-plan et les éléments de premier plan en fonction des déclencheurs de défilement. La bibliothèque utilise un moteur d'animation de transformation CSS pour garantir que le mouvement est accéléré matériellement sur les navigateurs mobiles et de bureau. Elle crée des effets de profondeur en appliquant différentes vitesses de mouvement aux éléments par rapport au taux de défilement naturel. Le framework couvre une gamme de capacités de mouvement, incluant les calculs de ratio de vitesse pour la parallaxe d'arrière-plan et d'élément, ainsi que l'alignement basé sur le décalage. Il permet la définition d'éléments ancêtres comme points de référence pour déterminer quand les éléments doivent revenir à leurs positions d'origine.

fluttereasyrefresh est une bibliothèque pour implémenter le pull-to-refresh et la pagination par défilement infini dans les composants de liste Flutter. Elle fournit les composants fonctionnels et la logique nécessaires pour déclencher des rechargements de données via des gestes de traction vers le bas et récupérer des blocs de données supplémentaires via des déclencheurs de traction vers le haut. Le projet présente une architecture d'indicateurs découplée qui permet des styles visuels personnalisables, des animations thématisées et un positionnement flexible des en-têtes et pieds de page. Il inclut un contrôleur centralisé qui permet la gestion programmatique des états de rafraîchissement et de chargement indépendamment des gestes de l'utilisateur. La bibliothèque couvre la gestion du défilement via une physique et une inertie personnalisables, ainsi qu'une synchronisation des données paginées pour automatiser le chargement des données en fonction des index de page. Elle offre également une intégration pour les vues à défilement imbriquées afin de coordonner les positions des indicateurs au sein d'une hiérarchie de vues.

react-waypoint est un composant React et un outil de suivi de viewport qui exécute des fonctions basées sur la visibilité d'un nœud DOM dans une zone défilable. Il surveille quand les éléments entrent ou quittent le viewport du navigateur ou un conteneur de défilement spécifié pour déclencher des rappels. Le projet permet la mise en œuvre du défilement infini, du chargement différé d'actifs et des animations déclenchées par le défilement. Il permet des définitions de conteneur de défilement personnalisées et des configurations de limites de viewport utilisant des décalages pour déterminer exactement quand les événements se déclenchent. L'outil fournit un suivi de la position des éléments et une surveillance de la visibilité pour le défilement vertical et horizontal. Il inclut un contrôle de la sensibilité de déclenchement et une limitation (throttling) des événements pour gérer l'exécution des rappels lors d'un défilement rapide.

react-waypoint est un ensemble de composants et de wrappers React conçus pour exécuter des rappels (callbacks) lorsque des éléments DOM spécifiques entrent ou sortent de la zone visible de l'écran. Il fonctionne comme un tracker de visibilité de viewport qui surveille quand les éléments franchissent des limites spatiales prédéfinies. Le projet fournit un composant de déclenchement de défilement et un wrapper d'événement qui permettent des configurations de décalage personnalisées pour tenir compte des éléments d'interface fixes. Ces outils peuvent être configurés pour utiliser un nœud DOM spécifique ou la fenêtre globale comme ancêtre défilable pour les calculs de visibilité. La bibliothèque couvre plusieurs modèles d'implémentation, notamment le défilement infini, le chargement différé (lazy loading) de contenu et les animations déclenchées par le défilement. Elle gère ces actions en surveillant la visibilité des éléments et en déclenchant des fonctions basées sur l'intersection de la boîte englobante d'un élément et du viewport actuel.

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.

Sal is a lightweight vanilla JavaScript library designed to trigger CSS animations and execute custom logic as elements enter the browser viewport. It serves as a programmatic wrapper for the Intersection Observer API, providing a viewport trigger system to handle visibility thresholds and scroll-based animations. The library operates as a dependency-free frontend tool that manages animations through a class-based trigger mechanism and the injection of CSS custom properties. It includes a system for tracking dynamic content, allowing the observer to be updated to include new elements injected

BasicScroll is a standalone scroll-driven animation library that updates CSS custom properties, element styles, and CSS properties dynamically based on absolute or relative viewport scroll positions. It functions as an animation engine designed to build custom parallax scrolling experiences and fluid visual effects on both mobile and desktop viewports. The library supports custom scroll range definitions anchored directly to specific document elements, alongside callback executions that trigger user-defined functions with live progress data and state percentages as the viewport enters or leav

React custom scrollbars is a user interface component built for React applications that replaces native browser scrollbars with custom-styled tracks and thumbs. It maintains consistent visual appearance across different platforms and browsers while generating matching markup on both server and client environments to support server-side rendering without layout shift. The library provides comprehensive styling options by overriding default track, thumb, and view elements with custom components, CSS classes, or inline styles. It handles layout adjustments by resizing container dimensions dynami

This project is a frontend component designed to manage dynamic content loading and scroll-based interactions within web applications. It provides a reusable interface for handling data injection as users navigate through scrollable areas, ensuring that content updates occur automatically based on scroll position or manual user triggers. The component distinguishes itself by supporting both standard downward infinite scrolling and inverse scrolling, which allows for the natural expansion of content history in chat-like interfaces. It offers developers full control over the visual presentation