Awesome GitHub RepositoriesViewport Intersection Events

Splide es una librería TypeScript agnóstica de frameworks para crear carruseles de contenido y galerías de imágenes accesibles y táctiles. Proporciona una implementación de sliders sin dependencias que admite interacciones de arrastrar, deslizar y flick en navegadores móviles y de escritorio. La librería se distingue por una capa de accesibilidad integral que utiliza roles ARIA y soporte para lectores de pantalla. Cuenta con un sistema de puntos de interrupción (breakpoints) responsive que adapta las dimensiones y el comportamiento del slide según el ancho de la pantalla, junto con un sistema de plugins para extender la funcionalidad principal con componentes personalizados y efectos de transición. El proyecto cubre una amplia gama de capacidades de diseño e interacción, incluyendo disposiciones en cuadrícula, dimensiones de slide variables y flujos de trabajo de slider sincronizados. Incluye optimizaciones de rendimiento como carga diferida de medios y monitorización de intersección con el viewport, así como navegación multimodal mediante teclado, rueda del ratón o miniaturas. Hay paquetes wrapper dedicados disponibles para la integración en diversas arquitecturas de frameworks frontend.

This is a React animation library providing a collection of components for creating choreographed motion, complex transitions, and SVG morphing. It functions as a motion design specification and a UI component animation wrapper system used to apply 3D transforms, Bezier curves, and entry-exit transitions to interface elements. The project includes a scroll-driven animation suite for synchronizing UI movements and parallax effects with the viewport position, as well as an SVG motion framework for animating paths, drawing lines incrementally, and interpolating coordinates for shape morphing. I

This project is a collection of experimental frontend prototypes, comprising a creative web layout gallery, a CSS user interface component library, and a visual experiment lab. It serves as an interactive animation showcase for holographic effects, audio-visual synthesis, and dynamic state transitions. The repository features specialized implementations of interactive media, including physics-based particle systems, real-time audio-visual synthesis, and an interactive sketching system. It also includes tools for content generation, such as text-based image reconstruction and a web-based prese

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.

Fixed-nav is a client-side JavaScript library for building responsive, touch-friendly navigation menus on single-page websites. It pins navigation bars to the screen viewport so control interfaces remain persistently accessible as users scroll through long content. The library automatically monitors scroll positions against document boundaries to highlight active section indicators in real time. When navigation links are selected, it animates viewport transitions to target sections using hardware-accelerated timing functions instead of abrupt jumps. Additional capabilities include dimming ba

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