Awesome GitHub RepositoriesScroll Event Controllers

This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It functions as a virtualized list component that maintains performance by removing off-screen elements and utilizes a native-driver animation library to map scroll offsets to style properties on the native thread for lag-free transitions. The library provides a parallax image gallery capable of shifting images relative to scroll progress to create a sense of depth. It also features a layout system that supports right-to-left orientations for languages such as Arabic and Hebrew. Capab

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-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.

FloatingActionButton is a scroll-driven UI controller and mobile-first interface element. It provides a circular button that floats above content and toggles its visibility based on scroll direction to maximize available screen space. The component functions as a CSS-animated UI element, utilizing stylesheet transitions to handle the visual sliding and fading of the interface controls. It is designed for mobile interfaces to provide quick access to primary actions without obscuring page content. The system manages visibility by monitoring scroll events on a designated DOM container and detec

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

This library provides a set of React components designed to improve initial page load performance by deferring the rendering of images and other elements until they enter the browser viewport. By managing content visibility and asset delivery, it reduces unnecessary network data usage and accelerates page rendering. The project distinguishes itself through its use of the browser-native intersection observer to track element visibility, which eliminates the need for manual scroll calculations. It further optimizes performance by consolidating event listeners into a single parent component, min

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