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

Această bibliotecă JavaScript de smooth scrolling este un utilitar frontend și un controller de mișcare a viewport-ului, conceput pentru a anima tranzițiile către link-uri ancoră. Aceasta interceptează click-urile standard pe link-uri pentru a înlocui salturile instantanee cu o mișcare fluidă către elementele țintă. Biblioteca oferă tipare de easing configurabile și controale de viteză pentru a gestiona accelerația și decelerarea. Include un mecanism pentru a anula imediat animațiile active și suportă declanșarea programatică a scroll-ului prin apeluri directe de funcții. Instrumentul gestionează offset-urile de poziționare pentru a preveni ascunderea conținutului țintă în spatele header-elor fixe și sincronizează bara de adrese a browserului în timpul tranzițiilor. De asemenea, dispune de un sistem de callback bazat pe evenimente care declanșează efecte secundare atunci când animațiile de scroll încep, se încheie sau sunt întrerupte.

react-waypoint este o componentă React și un instrument de urmărire a viewport-ului care execută funcții bazate pe vizibilitatea unui nod DOM într-o zonă scrollabilă. Acesta monitorizează când elementele intră sau părăsesc viewport-ul browserului sau un container de scroll specificat pentru a declanșa callback-uri. Proiectul permite implementarea scroll-ului infinit, încărcarea leneșă a activelor și animații declanșate la scroll. Permite definirea containerelor de scroll personalizate și configurarea limitelor viewport-ului folosind offset-uri pentru a determina exact când se declanșează evenimentele. Instrumentul oferă urmărirea poziției elementelor și monitorizarea vizibilității atât pentru scroll vertical, cât și orizontal. Include controlul sensibilității declanșatorului și limitarea ratei evenimentelor (throttling) pentru a gestiona execuția callback-urilor în timpul scroll-ului rapid.

ScrollTrigger is a JavaScript library and DOM scroll event manager designed to execute callbacks and toggle CSS classes when elements enter or exit the browser viewport. It functions as a high-level interface for the Intersection Observer API and a system for initiating visual transitions and asynchronous tasks based on an element's position relative to the viewport. The tool allows for the definition of precise trigger points using pixel or percentage offsets to control exactly when events fire. It manages scroll-driven visual animations and lazy loading implementations by tracking visibilit

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