Awesome GitHub RepositoriesScroll Event Controllers

This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It functions as a virtualized list component that maintains performance by removing off-screen elements and utilizes a native-driver animation library to map scroll offsets to style properties on the native thread for lag-free transitions. The library provides a parallax image gallery capable of shifting images relative to scroll progress to create a sense of depth. It also features a layout system that supports right-to-left orientations for languages such as Arabic and Hebrew. Capab

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

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.

react-waypoint ist eine Reihe von React-Komponenten und Wrappern, die entwickelt wurden, um Callbacks auszuführen, wenn bestimmte DOM-Elemente in den sichtbaren Bildschirmbereich eintreten oder diesen verlassen. Es fungiert als Viewport-Visibility-Tracker, der überwacht, wann Elemente vordefinierte räumliche Grenzen überschreiten. Das Projekt bietet eine Scroll-Trigger-Komponente und einen Event-Wrapper, die benutzerdefinierte Offset-Konfigurationen ermöglichen, um feste UI-Elemente zu berücksichtigen. Diese Tools können so konfiguriert werden, dass sie einen bestimmten DOM-Knoten oder das globale Fenster als scrollbaren Vorfahren für Sichtbarkeitsberechnungen verwenden. Die Bibliothek deckt verschiedene Implementierungsmuster ab, darunter Infinite Scrolling, Lazy Loading von Inhalten und scroll-getriggerte Animationen. Sie verwaltet diese Aktionen durch Überwachung der Element-Sichtbarkeit und das Auslösen von Funktionen basierend auf der Schnittmenge der Bounding-Box eines Elements und dem aktuellen Viewport.

ScrollTrigger ist eine JavaScript-Bibliothek und ein DOM-Scroll-Event-Manager, der dazu dient, Callbacks auszuführen und CSS-Klassen umzuschalten, wenn Elemente in den Browser-Viewport eintreten oder ihn verlassen. Es fungiert als High-Level-Schnittstelle für die Intersection Observer API und als System zum Initiieren visueller Übergänge und asynchroner Aufgaben basierend auf der Position eines Elements relativ zum Viewport. Das Tool ermöglicht die Definition präziser Triggerpunkte unter Verwendung von Pixel- oder Prozent-Offsets, um genau zu steuern, wann Ereignisse ausgelöst werden. Es verwaltet scrollgesteuerte visuelle Animationen und Lazy-Loading-Implementierungen durch die Verfolgung von Sichtbarkeitsschwellenwerten. Die Bibliothek bietet Funktionen zur Überwachung von Scroll-Aktivitäten, wie z. B. das Verfolgen, wann das Scrollen beginnt, stoppt oder die Richtung ändert. Sie unterstützt zudem das Auslösen von Viewport-Ereignissen, um benutzerdefinierte Funktionen oder Promises auszuführen, wenn Elemente bestimmte Koordinaten überschreiten.

FloatingActionButton is a scroll-driven UI controller and mobile-first interface element. It provides a circular button that floats above content and toggles its visibility based on scroll direction to maximize available screen space. The component functions as a CSS-animated UI element, utilizing stylesheet transitions to handle the visual sliding and fading of the interface controls. It is designed for mobile interfaces to provide quick access to primary actions without obscuring page content. The system manages visibility by monitoring scroll events on a designated DOM container and detec

This project is a frontend component designed to manage dynamic content loading and scroll-based interactions within web applications. It provides a reusable interface for handling data injection as users navigate through scrollable areas, ensuring that content updates occur automatically based on scroll position or manual user triggers. The component distinguishes itself by supporting both standard downward infinite scrolling and inverse scrolling, which allows for the natural expansion of content history in chat-like interfaces. It offers developers full control over the visual presentation

This library provides a set of React components designed to improve initial page load performance by deferring the rendering of images and other elements until they enter the browser viewport. By managing content visibility and asset delivery, it reduces unnecessary network data usage and accelerates page rendering. The project distinguishes itself through its use of the browser-native intersection observer to track element visibility, which eliminates the need for manual scroll calculations. It further optimizes performance by consolidating event listeners into a single parent component, min

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