Awesome GitHub RepositoriesScroll Lifecycle Callbacks

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

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

Esta biblioteca de scroll suave para JavaScript es una utilidad frontend y controlador de movimiento del viewport diseñada para animar transiciones hacia enlaces de anclaje. Intercepta los clics estándar en enlaces para reemplazar los saltos instantáneos con un movimiento fluido hacia los elementos de destino. La biblioteca proporciona patrones de suavizado de movimiento configurables y controles de velocidad para gestionar la aceleración y desaceleración. Incluye un mecanismo para cancelar animaciones activas inmediatamente y admite el disparo programático de scroll mediante llamadas directas a funciones. La herramienta maneja offsets de posicionamiento para evitar que el contenido de destino quede oculto detrás de cabeceras fijas y sincroniza la barra de direcciones del navegador durante las transiciones. También cuenta con un sistema de callbacks basado en eventos que dispara efectos secundarios cuando las animaciones de scroll comienzan, concluyen o son interrumpidas.

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.

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.

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