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 es un componente de React y herramienta de seguimiento de viewport que ejecuta funciones basadas en la visibilidad de un nodo DOM dentro de un área desplazable. Monitorea cuándo los elementos entran o salen del viewport del navegador o de un contenedor de scroll especificado para disparar callbacks. El proyecto permite la implementación de scroll infinito, carga diferida de activos y animaciones disparadas por scroll. Permite definiciones de contenedores de scroll personalizados y configuraciones de límites de viewport usando offsets para determinar exactamente cuándo se disparan los eventos. La herramienta proporciona seguimiento de posición de elementos y monitoreo de visibilidad tanto para scroll vertical como horizontal. Incluye control de sensibilidad de disparo y limitación de eventos para gestionar la ejecución de callbacks durante el scroll rápido.

react-waypoint es un conjunto de componentes y wrappers de React diseñados para ejecutar callbacks cuando elementos específicos del DOM entran o salen del área visible de la pantalla. Funciona como un rastreador de visibilidad del viewport que monitorea cuándo los elementos cruzan límites espaciales predefinidos. El proyecto proporciona un componente de disparo de scroll y un wrapper de eventos que permiten configuraciones de desplazamiento personalizadas para tener en cuenta elementos de UI fijos. Estas herramientas pueden configurarse para usar un nodo DOM específico o la ventana global como el ancestro desplazable para los cálculos de visibilidad. La biblioteca cubre varios patrones de implementación, incluyendo scroll infinito, carga diferida de contenido y animaciones disparadas por scroll. Gestiona estas acciones monitoreando la visibilidad del elemento y disparando funciones basadas en la intersección de la caja delimitadora del elemento y el viewport actual.

ScrollTrigger es una biblioteca de JavaScript y gestor de eventos de scroll del DOM diseñada para ejecutar callbacks y alternar clases CSS cuando los elementos entran o salen del viewport del navegador. Funciona como una interfaz de alto nivel para la API Intersection Observer y un sistema para iniciar transiciones visuales y tareas asíncronas basadas en la posición de un elemento en relación con el viewport. La herramienta permite la definición de puntos de activación precisos utilizando offsets en píxeles o porcentajes para controlar exactamente cuándo se disparan los eventos. Gestiona animaciones visuales basadas en scroll e implementaciones de carga diferida (lazy loading) mediante el seguimiento de umbrales de visibilidad. La biblioteca proporciona capacidades para monitorear la actividad de scroll, como rastrear cuándo comienza, se detiene o cambia de dirección el desplazamiento. Además, admite la activación de eventos de viewport para ejecutar funciones personalizadas o promesas a medida que los elementos cruzan coordenadas específicas.

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