Awesome GitHub RepositoriesIntersection Observer Implementations

AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based on element visibility and browser viewport intersections. It functions as a DOM element animation controller and a viewport intersection trigger to initiate visual transitions as elements enter the screen. The library utilizes a custom CSS transition bridge to map scroll-based triggers to CSS class changes, enabling integration with external styling frameworks. It supports anchor-based animation triggers, allowing the visibility of one page element to act as the trigger point

ScrollReveal is a client-side JavaScript library used to trigger CSS animations and transitions for page elements as they enter the browser viewport. It functions as a DOM element animation trigger and a simplified wrapper for the Intersection Observer API to coordinate visual entrance effects and staggered animations based on the user's scroll position. The library focuses on scroll-driven motion and reveal effects, enabling the execution of visual changes and animations automatically as a user navigates a website. It manages the reveal of page content to create movement and progression with

vue-lazyload is a Vue.js image lazy loading plugin and frontend asset optimizer. It serves as a viewport visibility observer that defers the loading of images and components until they enter the browser viewport to reduce initial page load times. The project functions as a progressive image loader by managing image placeholders and implementing dynamic source switching. It uses a browser API to monitor when elements enter the viewport, avoiding expensive scroll event listeners to maintain performance. The plugin provides capabilities for image loading state tracking, including custom placeho

Este proyecto es una biblioteca de JavaScript vainilla y optimizador de rendimiento web diseñado para diferir la carga de imágenes, videos e iframes hasta que entren en el viewport del navegador. Actúa como un wrapper de intersection observer y cargador de medios adaptativo para reducir los tiempos de carga inicial de la página y ahorrar ancho de banda. La biblioteca se distingue por admitir imágenes responsivas mediante srcset y etiquetas picture, así como imágenes de fondo CSS y SVGs animados. Se integra con los atributos de carga nativos del navegador donde están disponibles, mientras proporciona fallbacks personalizados para entornos no compatibles. También puede activar la ejecución de funciones de JavaScript específicas basadas en la visibilidad del elemento. Las capacidades amplias incluyen la gestión de activos frontend con soporte para el direccionamiento de contenedores de desplazamiento personalizados y la observación de contenido dinámico para elementos inyectados de forma asíncrona. La utilidad también gestiona la fiabilidad de la red mediante el manejo de errores de carga de activos y cancela las descargas activas para los elementos que salen del viewport antes de completarse.

usehooks-ts is a comprehensive collection of reusable TypeScript-based hooks designed for managing state, DOM events, and browser API interactions within React applications. It provides a typed library of functions to handle common frontend patterns and side effects. The project distinguishes itself by offering specialized hooks for browser integration, including tools for interacting with the system clipboard, managing local and session storage persistence, and loading external scripts. It also includes utilities for responsive UI development, such as tracking media queries, window dimension

Este proyecto es un componente de carga diferida (lazy loading) para React, diseñado para mejorar el rendimiento del frontend difiriendo el renderizado de elementos hijos hasta que entran en el viewport del navegador. Funciona como un gestor de ciclo de vida de recursos y disparador de visibilidad, evitando montajes innecesarios de componentes fuera de pantalla para reducir los tiempos de carga inicial de la página y el uso de memoria. La biblioteca proporciona configuración para disparadores de visibilidad, permitiendo el uso de offsets personalizados y contenedores de desplazamiento específicos para determinar cuándo se carga un componente. Incluye mecanismos para gestionar ciclos de vida de componentes, permitiendo elegir si un componente permanece cargado después de aparecer o si se desmonta al salir del viewport. Las capacidades adicionales cubren el renderizado diferido mediante el uso de marcadores de posición (placeholders) y la optimización del manejo de eventos para listeners de desplazamiento y cambio de tamaño. El sistema también admite la validación manual de visibilidad para forzar comprobaciones de viewport o exigir que un componente se muestre.

react-lazyload es un componente de React y wrapper de visibilidad de viewport diseñado para minimizar el consumo de recursos difiriendo la visualización de elementos de UI fuera de pantalla. Funciona como un optimizador de rendimiento de frontend que retrasa el renderizado de imágenes o componentes hasta que entran en el viewport del navegador. La biblioteca evita cambios de diseño (layout shifts) permitiendo la definición de dimensiones de marcadores de posición, manteniendo la estabilidad de la página mientras el contenido se carga de forma diferida. Gestiona la transición desde estos marcadores de posición al contenido real utilizando estado interno y animaciones opcionales. El sistema proporciona mecanismos para la detección de visibilidad en el viewport, anulaciones de visualización manual para forzar el montaje inmediato y disparadores de visibilidad manuales para casos donde los eventos estándar de desplazamiento o cambio de tamaño son insuficientes.

react-intersection-observer is a React implementation of the Intersection Observer API designed to track when DOM elements enter or leave the browser viewport. It provides a wrapper and a set of hooks for monitoring element visibility and triggering callbacks when content becomes visible to the user. The library includes a mechanism for DOM occlusion detection to determine if an element is covered by other components or hidden by CSS filters. It also features a polyfill wrapper that provides visibility fallbacks for browsers that do not natively support intersection observer capabilities. Th

layzr.js es una librería de JavaScript para lazy loading de imágenes, diseñada para mejorar la velocidad de carga inicial de la página retrasando la descarga de imágenes hasta que entran en el viewport del navegador. Funciona como un selector de imágenes responsivo que identifica la fuente de imagen más adecuada según el soporte del navegador y la densidad de píxeles del dispositivo. La librería emplea un sistema para la entrega de imágenes responsivas que evalúa atributos de datos para seleccionar las fuentes óptimas. Incluye un mecanismo para el seguimiento de contenido dinámico, que monitorea el documento en busca de imágenes recién añadidas para asegurar que se incluyan automáticamente en la cola de carga. El proyecto proporciona seguimiento de visibilidad mediante la API Intersection Observer e incluye una utilidad para forzar actualizaciones manuales del viewport. También cuenta con un emisor de eventos que permite ejecutar lógica personalizada a través de hooks de ciclo de vida antes y después de que las fuentes de imagen se actualicen.

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.

Precedent es un starter de aplicaciones Next.js y biblioteca de componentes que proporciona un conjunto fundamental de herramientas y primitivas preconfiguradas para construir interfaces web listas para producción. Sirve como un kit de herramientas para arrancar aplicaciones con autenticación integrada, analíticas y una colección de componentes de UI con opinión. El proyecto se distingue por un kit de UI de Tailwind CSS que combina primitivas de accesibilidad y bibliotecas de movimiento para crear interfaces pulidas. Incluye un generador de imágenes del lado del servidor para crear programáticamente imágenes dinámicas para compartir en redes sociales y visuales de vista previa en el borde de la red (edge). La biblioteca cubre una amplia gama de capacidades, incluyendo integración de identidad de terceros para autenticación de usuarios y gestión de sesiones, analíticas de sitios web centradas en la privacidad para el seguimiento de métricas de visitantes y una colección de hooks de React personalizados para gestionar el estado del lado del cliente, almacenamiento local y visibilidad de elementos. También proporciona utilidades para formatear texto y números.

Autotrack es una librería de JavaScript para Google Analytics que captura automáticamente las interacciones del usuario y el engagement en la página. Proporciona un sistema para la implementación declarativa de analíticas, permitiendo que los eventos web se rastreen mediante atributos HTML para evitar escribir JavaScript personalizado para cada interacción. El proyecto incluye un generador de bundles de analíticas para crear archivos JavaScript minimizados que contienen solo los plugins de seguimiento específicos requeridos para un proyecto. También funciona como un rastreador de aplicaciones de una sola página (SPA) que monitorea los cambios en el historial del navegador para registrar vistas de página virtuales. La librería cubre una amplia gama de capacidades de medición de engagement, incluyendo el seguimiento de la profundidad de scroll, visibilidad de elementos y estados de media queries. También proporciona herramientas para la normalización de datos de analíticas web, como el filtrado de parámetros de URL y la estandarización de rutas para evitar entradas duplicadas.

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.

Fluid Player is a web-based media playback library designed to embed lightweight, responsive video players into websites. It supports standard video formats and adaptive streaming across modern browsers, providing a foundation for consistent media delivery and custom interface branding. The library distinguishes itself through integrated support for industry-standard advertising protocols, allowing for the injection and orchestration of linear and non-linear video advertisements. It includes built-in tracking for viewer engagement and performance metrics, ensuring that ad delivery is synchron