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

Dieses Projekt ist eine Vanilla-JavaScript-Bibliothek und ein Web-Performance-Optimierer, der darauf ausgelegt ist, das Laden von Bildern, Videos und Iframes zu verzögern, bis sie in den Browser-Viewport gelangen. Es fungiert als Intersection-Observer-Wrapper und adaptiver Media-Loader, um die anfänglichen Seitenladezeiten zu reduzieren und Bandbreite zu sparen. Die Bibliothek zeichnet sich dadurch aus, dass sie responsive Bilder über srcset- und picture-Tags sowie CSS-Hintergrundbilder und animierte SVGs unterstützt. Sie integriert sich in native Browser-Ladeattribute, wo verfügbar, und bietet gleichzeitig benutzerdefinierte Fallbacks für nicht unterstützte Umgebungen. Sie kann zudem die Ausführung spezifischer JavaScript-Funktionen basierend auf der Sichtbarkeit von Elementen auslösen. Zu den breiten Funktionen gehört das Frontend-Asset-Management mit Unterstützung für das Targeting benutzerdefinierter Scroll-Container und die Beobachtung dynamischer Inhalte für asynchron injizierte Elemente. Das Dienstprogramm verwaltet zudem die Netzwerkzuverlässigkeit durch Fehlerbehandlung beim Laden von Assets und bricht aktive Downloads für Elemente ab, die den Viewport vor Abschluss verlassen.

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

Dieses Projekt ist eine React-Lazy-Loading-Komponente, die zur Verbesserung der Frontend-Performance entwickelt wurde, indem das Rendern von Child-Elementen verzögert wird, bis diese in den Browser-Viewport gelangen. Sie fungiert als Ressourcen-Lifecycle-Manager und Visibility-Trigger, der unnötiges Mounten von Off-Screen-Komponenten verhindert, um die initiale Ladezeit der Seite und den Speicherverbrauch zu reduzieren. Die Bibliothek bietet Konfigurationsmöglichkeiten für Visibility-Trigger, die den Einsatz benutzerdefinierter Offsets und spezifischer Scroll-Container erlauben, um zu bestimmen, wann eine Komponente geladen wird. Sie enthält Mechanismen zur Verwaltung von Komponenten-Lifecycles, die es ermöglichen zu wählen, ob eine Komponente nach dem Erscheinen geladen bleibt oder beim Verlassen des Viewports wieder unmounted wird. Zusätzliche Funktionen decken das verzögerte Rendern durch Platzhalter sowie die Optimierung des Event-Handlings für Scroll- und Resize-Listener ab. Das System unterstützt zudem manuelle Sichtbarkeitsvalidierungen, um Viewport-Checks zu erzwingen oder sicherzustellen, dass eine Komponente angezeigt wird.

react-lazyload ist eine React-Komponente und ein Viewport-Visibility-Wrapper, der darauf ausgelegt ist, den Ressourcenverbrauch durch das verzögerte Anzeigen von Off-Screen-UI-Elementen zu minimieren. Er fungiert als Frontend-Performance-Optimierer, der das Rendern von Bildern oder Komponenten verzögert, bis diese in den Browser-Viewport gelangen. Die Bibliothek verhindert Layout-Shifts, indem sie die Definition von Platzhalter-Dimensionen erlaubt und so die Seitenstabilität während des Lazy-Loadings von Inhalten aufrechterhält. Sie verwaltet den Übergang von diesen Platzhaltern zu den tatsächlichen Inhalten mittels internem Status und optionalen Animationen. Das System bietet Mechanismen zur Viewport-Sichtbarkeitserkennung, manuelle Anzeige-Overrides zum Erzwingen eines sofortigen Mountings sowie manuelle Sichtbarkeits-Trigger für Fälle, in denen Standard-Scroll- oder Resize-Events nicht ausreichen.

react-intersection-observer ist eine React-Implementierung der Intersection Observer API, die darauf ausgelegt ist, zu verfolgen, wann DOM-Elemente in den Browser-Viewport eintreten oder ihn verlassen. Sie bietet einen Wrapper und eine Reihe von Hooks zur Überwachung der Sichtbarkeit von Elementen und zum Auslösen von Callbacks, wenn Inhalte für den Benutzer sichtbar werden. Die Bibliothek enthält einen Mechanismus zur Erkennung von DOM-Okklusion, um festzustellen, ob ein Element von anderen Komponenten verdeckt oder durch CSS-Filter ausgeblendet wird. Sie verfügt zudem über einen Polyfill-Wrapper, der Sichtbarkeits-Fallbacks für Browser bietet, die keine nativen Intersection-Observer-Funktionen unterstützen. Das Projekt deckt verschiedene Funktionen zur Sichtbarkeitsverfolgung ab, einschließlich zustandssynchronisierter Updates für Komponenten-Re-Renders und nicht-rendernder Überwachung, um Callbacks auszuführen, ohne den Zustand zu aktualisieren. Diese Tools unterstützen die Implementierung von Infinite Scrolling, Lazy Loading von Assets und scrollbasierten Animationen.

layzr.js ist eine JavaScript-Bibliothek für Lazy Loading von Bildern, die die initiale Seitenladezeit verbessert, indem der Download von Bildern verzögert wird, bis sie in den Viewport des Browsers gelangen. Sie fungiert als responsiver Bild-Selektor, der basierend auf Browser-Unterstützung und Pixeldichte des Geräts die am besten geeignete Bildquelle identifiziert. Die Bibliothek nutzt ein System für responsive Bildauslieferung, das Datenattribute auswertet, um optimale Quellen auszuwählen. Sie enthält einen Mechanismus für dynamisches Content-Tracking, der das Dokument auf neu hinzugefügte Bilder überwacht, um sicherzustellen, dass diese automatisch zur Lade-Queue hinzugefügt werden. Das Projekt bietet Sichtbarkeits-Tracking über die Intersection Observer API und enthält ein Utility, um manuelle Viewport-Refreshes zu erzwingen. Zudem verfügt es über einen Event-Emitter, der es ermöglicht, benutzerdefinierte Logik über Lifecycle-Hooks vor und nach der Aktualisierung von Bildquellen auszuführen.

Splide ist eine Framework-agnostische TypeScript-Bibliothek zum Erstellen barrierefreier, Touch-fähiger Content-Karussells und Bildergalerien. Sie bietet eine abhängigkeitsfreie Implementierung von Slidern, die Drag-, Swipe- und Flick-Interaktionen auf Mobil- und Desktop-Browsern unterstützen. Die Bibliothek zeichnet sich durch eine umfassende Barrierefreiheitsebene unter Verwendung von ARIA-Rollen und Screenreader-Unterstützung aus. Sie verfügt über ein responsives Breakpoint-System, das Slider-Dimensionen und -Verhalten an die Bildschirmbreite anpasst, sowie ein Plugin-System zur Erweiterung der Kernfunktionen um benutzerdefinierte Komponenten und Übergangseffekte. Das Projekt deckt eine Vielzahl an Layout- und Interaktionsmöglichkeiten ab, einschließlich Grid-Anordnungen, variabler Slider-Dimensionen und synchronisierter Slider-Workflows. Es enthält Performance-Optimierungen wie Lazy-Loading von Medien und Viewport-Intersection-Monitoring sowie multimodale Navigation via Tastatur, Mausrad oder Thumbnail-Verlinkung. Dedizierte Wrapper-Pakete sind für die Integration in verschiedene Frontend-Framework-Architekturen verfügbar.

Precedent is a Next.js application starter and component library providing a foundational set of pre-configured tools and primitives for building production-ready web interfaces. It serves as a toolkit for bootstrapping applications with integrated authentication, analytics, and a collection of opinionated UI components. The project distinguishes itself through a Tailwind CSS UI kit that combines accessibility primitives and motion libraries to create polished interfaces. It includes a server-side image generator for programmatically creating dynamic social sharing images and preview visuals

Autotrack ist eine JavaScript-Bibliothek für Google Analytics, die Benutzerinteraktionen und Seiten-Engagement automatisch erfasst. Sie bietet ein System für deklarative Analytics-Implementierung, das es ermöglicht, Web-Events über HTML-Attribute zu tracken, um nicht für jede Interaktion benutzerdefiniertes JavaScript schreiben zu müssen. Das Projekt enthält einen Analytics-Bundle-Generator, um minimierte JavaScript-Dateien zu erstellen, die nur die für ein Projekt erforderlichen Tracking-Plugins enthalten. Es fungiert zudem als Single-Page-Application-Tracker, der Änderungen am Browserverlauf überwacht, um virtuelle Pageviews aufzuzeichnen. Die Bibliothek deckt ein breites Spektrum an Engagement-Messfunktionen ab, einschließlich des Trackings von Scrolltiefe, Element-Sichtbarkeit und Media-Query-Zuständen. Sie bietet zudem Tools zur Normalisierung von Web-Analytics-Daten, wie das Filtern von URL-Parametern und die Standardisierung von Pfaden, um doppelte Einträge zu vermeiden.

react-waypoint ist eine React-Komponente und ein Viewport-Tracking-Tool, das Funktionen basierend auf der Sichtbarkeit eines DOM-Knotens innerhalb eines scrollbaren Bereichs ausführt. Es überwacht, wann Elemente den Browser-Viewport oder einen spezifizierten Scroll-Container betreten oder verlassen, um Callbacks auszulösen. Das Projekt ermöglicht die Implementierung von Infinite Scrolling, Lazy Loading von Assets und scroll-getriggerten Animationen. Es erlaubt benutzerdefinierte Definitionen von Scroll-Containern und Viewport-Grenzen unter Verwendung von Offsets, um exakt zu bestimmen, wann Ereignisse ausgelöst werden. Das Tool bietet Element-Positions-Tracking und Sichtbarkeitsüberwachung für vertikales und horizontales Scrollen. Es beinhaltet eine Steuerung der Trigger-Empfindlichkeit und Event-Throttling, um die Callback-Ausführung bei schnellem Scrollen zu verwalten.

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