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 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

react-waypoint is a set of React components and wrappers designed to execute callbacks when specific DOM elements enter or exit the visible screen area. It functions as a viewport visibility tracker that monitors when elements cross predefined spatial boundaries. The project provides a scroll trigger component and event wrapper that allow for custom offset configurations to account for fixed UI elements. These tools can be configured to use a specific DOM node or the global window as the scrollable ancestor for visibility calculations. The library covers several implementation patterns, incl

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

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