Awesome GitHub RepositoriesScroll Lifecycle Callbacks

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

Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations. The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports

Diese JavaScript-Bibliothek für Smooth Scrolling ist ein Frontend-Utility und Viewport-Motion-Controller, der dazu entwickelt wurde, Übergänge zu Anker-Links zu animieren. Sie fängt Standard-Link-Klicks ab, um sofortige Sprünge durch flüssige Bewegungen zu den Zielelementen zu ersetzen. Die Bibliothek bietet konfigurierbare Motion-Easing-Muster und Geschwindigkeitssteuerungen zur Verwaltung von Beschleunigung und Verzögerung. Sie enthält einen Mechanismus zum sofortigen Abbrechen aktiver Animationen und unterstützt das programmatische Auslösen von Scroll-Vorgängen über direkte Funktionsaufrufe. Das Tool handhabt Positionierungs-Offsets, um zu verhindern, dass Zielinhalte hinter fixierten Headern verborgen bleiben, und synchronisiert die Browser-Adressleiste während der Übergänge. Zudem verfügt es über ein ereignisgesteuertes Callback-System, das Seiteneffekte auslöst, wenn Scroll-Animationen starten, enden oder unterbrochen werden.

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.

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.

BasicScroll is a standalone scroll-driven animation library that updates CSS custom properties, element styles, and CSS properties dynamically based on absolute or relative viewport scroll positions. It functions as an animation engine designed to build custom parallax scrolling experiences and fluid visual effects on both mobile and desktop viewports. The library supports custom scroll range definitions anchored directly to specific document elements, alongside callback executions that trigger user-defined functions with live progress data and state percentages as the viewport enters or leav

React custom scrollbars is a user interface component built for React applications that replaces native browser scrollbars with custom-styled tracks and thumbs. It maintains consistent visual appearance across different platforms and browsers while generating matching markup on both server and client environments to support server-side rendering without layout shift. The library provides comprehensive styling options by overriding default track, thumb, and view elements with custom components, CSS classes, or inline styles. It handles layout adjustments by resizing container dimensions dynami