terwanerik/ScrollTrigger
ScrollTrigger
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.
Features
- Scroll Animations - Provides a system to trigger visual transitions and asynchronous tasks based on element visibility within the viewport.
- Intersection Observer Wrappers - Functions as a high-level wrapper for the Intersection Observer API to simplify element visibility detection.
- Viewport Intersection Callbacks - Runs custom functions or promises when elements enter, leave, or remain visible within the browser viewport.
- Scroll-Driven Animation Tools - Synchronizes visual transitions and CSS property changes with the user's scroll position and element visibility.
- Scroll Event Controllers - Provides logic to monitor scroll events and direction changes to control UI element states.
- State-Based CSS Toggling - Dynamically modifies CSS classes on elements to reflect their current visibility state during scrolling.
- Scroll-Triggered Class Mappings - Maps viewport intersection events to specific CSS class changes to drive visual transitions.
- Viewport Intersection Events - Triggers custom JavaScript functions when elements enter or exit the viewport based on visibility thresholds.
- Viewport Threshold Dispatchers - Executes custom callbacks precisely when elements cross predefined pixel or percentage offsets within the viewable area.
- Scroll Trigger Libraries - Provides a complete JavaScript toolset for executing callbacks and toggling CSS classes during viewport intersection.
- Viewport Visibility Callbacks - Executes custom functions when elements enter or leave the visible area to trigger tasks like lazy loading.
- Viewport Relative Tracking - Monitors the real-time position of DOM elements relative to the browser viewport to determine trigger points.
- Scroll Behavior Observers - Tracks user scrolling behavior to trigger actions when scrolling starts, stops, or changes direction.
- Scroll-Offset Thresholds - Manages precise trigger points using pixel or percentage offsets to control event firing.
- Step Trigger Offsets - Allows defining exact trigger moments using pixel or percentage offsets based on element or viewport size.
- Scroll Observers - Provides observers to track scroll start, stop, and direction changes for reactive UI logic.
- Lazy Loading Schedulers - Supports lazy loading by scheduling asynchronous tasks when elements enter the viewport.
