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

مكتبة التمرير السلس (Smooth Scrolling) لـ JavaScript هذه هي أداة واجهة أمامية ووحدة تحكم في حركة إطار العرض مصممة لتحريك الانتقالات إلى روابط الارتساء (Anchor links). تقوم باعتراض نقرات الروابط القياسية لاستبدال القفزات الفورية بحركة انسيابية نحو العناصر المستهدفة. توفر المكتبة أنماط تخفيف حركة قابلة للتكوين وعناصر تحكم في السرعة لإدارة التسارع والتباطؤ. تتضمن آلية لإلغاء الرسوم المتحركة النشطة فوراً وتدعم تشغيل التمرير البرمجي عبر استدعاءات الوظائف المباشرة. تتعامل الأداة مع إزاحات التموضع لمنع إخفاء المحتوى المستهدف خلف الرؤوس الثابتة وتزامن شريط عنوان المتصفح أثناء الانتقالات. كما تتميز بنظام استدعاء (Callback) يعتمد على الأحداث يقوم بتشغيل تأثيرات جانبية عند بدء أو انتهاء أو مقاطعة رسوم التمرير المتحركة.

react-waypoint is a React component and viewport tracking tool that executes functions based on the visibility of a DOM node within a scrollable area. It monitors when elements enter or leave the browser viewport or a specified scroll container to trigger callbacks. The project enables the implementation of infinite scrolling, asset lazy loading, and scroll-triggered animations. It allows for custom scroll container definitions and viewport boundary configurations using offsets to determine exactly when events fire. The tool provides element position tracking and visibility monitoring for bo

ScrollTrigger هي مكتبة JavaScript ومدير لأحداث التمرير في DOM مصممة لتنفيذ استدعاءات (callbacks) وتبديل فئات CSS عندما تدخل العناصر إلى إطار عرض المتصفح أو تخرج منه. تعمل كواجهة عالية المستوى لـ Intersection Observer API ونظام لبدء التحولات المرئية والمهام غير المتزامنة بناءً على موقع العنصر بالنسبة لإطار العرض. تسمح الأداة بتحديد نقاط تشغيل دقيقة باستخدام إزاحات البكسل أو النسبة المئوية للتحكم بدقة في وقت إطلاق الأحداث. وتدير الرسوم المتحركة المرئية القائمة على التمرير وعمليات التحميل الكسول (lazy loading) من خلال تتبع عتبات الرؤية. توفر المكتبة قدرات لمراقبة نشاط التمرير، مثل تتبع وقت بدء التمرير أو توقفه أو تغيير اتجاهه. كما تدعم تشغيل أحداث إطار العرض لتشغيل وظائف مخصصة أو وعود (promises) عند عبور العناصر لإحداثيات محددة.

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