Awesome GitHub RepositoriesScroll-Triggered Animations

AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based on element visibility and browser viewport intersections. It functions as a DOM element animation controller and a viewport intersection trigger to initiate visual transitions as elements enter the screen. The library utilizes a custom CSS transition bridge to map scroll-based triggers to CSS class changes, enabling integration with external styling frameworks. It supports anchor-based animation triggers, allowing the visibility of one page element to act as the trigger point

ScrollReveal is a client-side JavaScript library used to trigger CSS animations and transitions for page elements as they enter the browser viewport. It functions as a DOM element animation trigger and a simplified wrapper for the Intersection Observer API to coordinate visual entrance effects and staggered animations based on the user's scroll position. The library focuses on scroll-driven motion and reveal effects, enabling the execution of visual changes and animations automatically as a user navigates a website. It manages the reveal of page content to create movement and progression with

WOW is a JavaScript library and frontend animation controller that triggers CSS animations when elements enter the browser viewport during scrolling. It functions as a viewport trigger engine, managing the timing and execution of visual transitions for both static and dynamic page content. The library integrates scroll events with CSS animations and effects from libraries such as Animate.css. It utilizes intersection observers to monitor viewport entry and mutation observers to track and apply animation triggers to new elements added to the DOM after the initial setup.

VvvebJs is a self-hosted, vanilla JavaScript library for visually assembling web pages by dragging pre-built HTML components onto a canvas. It functions as a visual HTML editor and component-based page builder that requires no build tools or external dependencies, and can be deployed on a server with PHP or Node.js backend for saving and exporting pages. The builder organizes reusable HTML components into named groups for drag-and-drop assembly, and provides visual property editing that modifies HTML attributes, CSS styles, and class names through form controls and property panels. It include

CountUp.js is a lightweight JavaScript library that animates a numerical value from zero to a target number over a configurable duration with smooth easing. It supports both count-up and count-down transitions, making it a focused tool for displaying animated numerical changes on web pages. The library distinguishes itself through support for bidirectional number animation, custom easing functions, and locale-aware number formatting with configurable separators, decimal points, and digit groupings. It also offers plugin-based rendering, allowing developers to replace the default display logic

JazzHands is a UIKit framework providing a scroll-driven animation engine and a paging layout manager. It enables the binding of view properties to timelines of keyframes, allowing visual transitions to be synced with real-time scroll offsets or gesture data. The project distinguishes itself through a value-interpolation engine that calculates intermediate property states. This allows animation progress to be driven by external input values, mapping view attributes to a timeline based on a floating point progress indicator. The framework also includes a system for organizing views within pag

WebSlides is a CSS-class-driven presentation framework that turns HTML sections into full-screen slides with keyboard, touch, and remote navigation. Its core architecture defines slides as HTML section elements styled entirely through CSS classes for layout, animation, and background, with a vertical-rhythm spacing foundation using an 8-pixel baseline grid. The framework includes a plugin-based behavior extension system that hooks into slide lifecycle events, and maps each slide to a unique URL hash for direct permalink navigation. The framework distinguishes itself through a comprehensive se

This project provides component wrappers and managers that automate the synchronization between software keyboard visibility and the scroll position of active input elements. It is a cross-platform mobile keyboard scroll view designed to keep active text inputs visible above the software keyboard. The library functions as a keyboard-aware component wrapper that detects software keyboard events to prevent input fields from being obscured. It utilizes an automatic input focus scroller to calculate the necessary scroll position and maintain focus on the active cursor. The system covers mobile U

यह प्रोजेक्ट एक व्यापक CSS एनीमेशन ट्यूटोरियल और एक स्ट्रक्चर्ड फ्रंटएंड एनीमेशन कोर्स है। यह वेब मोशन सीखने का एक संसाधन है जिसे ब्राउज़र के भीतर विजुअल ट्रांजिशन और एनीमेशन लागू करना सिखाने के लिए डिज़ाइन किया गया है। यह संसाधन CSS 3D एनीमेशन के लिए एक गाइड प्रदान करता है, जिसमें थ्री-डायमेंशनल सीन और डेप्थ की रेंडरिंग शामिल है। इसमें मोशन डिज़ाइन के निर्देश दिए गए हैं, जैसे स्क्रॉल-ट्रिगर एनीमेशन, स्प्राइट शीट एनीमेशन और जटिल वेब इंटरफेस एनीमेशन। यह एलिमेंट ज्योमेट्री में हेरफेर, एनीमेशन पेसिंग और प्लेबैक स्टेट को मैनेज करने जैसी मुख्य क्षमताओं को कवर करता है। साथ ही, यह स्टेट इंटरपोलेशन, 3D रेंडरिंग और मल्टीपल एनीमेशन के सिंक्रोनाइज़ेशन जैसे तकनीकी पहलुओं को भी संबोधित करता है।

यह एक React एनीमेशन लाइब्रेरी है जो कोरियोग्राफ्ड मोशन, जटिल ट्रांज़िशन, और SVG मॉर्फिंग बनाने के लिए कंपोनेंट्स का एक संग्रह प्रदान करती है। यह एक मोशन डिज़ाइन विनिर्देश और एक UI कंपोनेंट एनीमेशन रैपर सिस्टम के रूप में कार्य करता है जिसका उपयोग इंटरफेस एलिमेंट्स पर 3D ट्रांसफॉर्म्स, बेज़ियर कर्व्स, और एंट्री-एग्जिट ट्रांज़िशन लागू करने के लिए किया जाता है। इस प्रोजेक्ट में UI मूवमेंट्स और पैरालैक्स इफेक्ट्स को व्यूपोर्ट स्थिति के साथ सिंक्रोनाइज़ करने के लिए एक स्क्रॉल-ड्रिवन एनीमेशन सूट, और पाथ्स को एनिमेट करने, लाइन्स को क्रमिक रूप से खींचने, और शेप मॉर्फिंग के लिए निर्देशांक को इंटरपोलेट करने के लिए एक SVG मोशन फ्रेमवर्क शामिल है। इसकी क्षमताएं विज़ुअल मोशन की एक विस्तृत श्रृंखला को कवर करती हैं, जिसमें रोटेटिंग कैरोसेल्स जैसे 3D विज़ुअल इफेक्ट्स, संख्यात्मक इंटरपोलेशन के लिए डेटा विज़ुअलाइज़ेशन मोशन, और इंटरैक्टिव लैंडिंग पेज असेंबली शामिल हैं। यह टेबल्स और सूचियों के लिए जटिल कंपोनेंट एनिमेशन को भी प्रबंधित करता है, और कई एलिमेंट्स के लिए एनिमेशन को अनुक्रमित और चेन करने के लिए टूल्स प्रदान करता है।

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

Sal is a lightweight vanilla JavaScript library designed to trigger CSS animations and execute custom logic as elements enter the browser viewport. It serves as a programmatic wrapper for the Intersection Observer API, providing a viewport trigger system to handle visibility thresholds and scroll-based animations. The library operates as a dependency-free frontend tool that manages animations through a class-based trigger mechanism and the injection of CSS custom properties. It includes a system for tracking dynamic content, allowing the observer to be updated to include new elements injected

Oat is a CSS variable-driven UI kit and semantic HTML component library that styles native HTML elements and attributes contextually, eliminating the need for CSS classes and reducing markup bloat. It provides a complete theming system where all visual properties are defined as CSS custom properties, allowing dark mode toggling and custom color themes by setting a single data attribute on the root element. The library delivers interactive UI elements as zero-dependency WebComponents that require no framework, build tool, or external library, while also offering declarative scroll animations t

This project is a Tailwind CSS animation library and accessibility-aware motion framework. It provides a collection of utility classes for adding high-performance keyframe animations and motion effects to web projects, while automatically respecting user-defined reduced motion preferences. The system includes a browser-based animation designer for creating and exporting custom presets as CSS styles or utility classes. It also functions as a scroll-triggered animation framework, enabling entrance and exit transitions that execute as elements enter the viewport, including support for staggered

uillayouts is a comprehensive design system consisting of interactive components, responsive templates, motion-enhanced UI kits, and advanced visual effect toolkits. It provides a collection of accessible React UI components and pre-designed layout sections for landing pages. The project is distinguished by a specialized visual effects library and motion-driven components. It features high-performance graphical enhancements such as glassmorphism, mesh gradients, noise overlays, and SVG masking, alongside interactive elements that utilize physics-based animations and cursor-tracking effects.

Motion is a declarative animation framework designed for Vue applications. It provides a system for defining complex visual states and element transformations through an object-based syntax, allowing developers to manage interface motion directly within component templates. The library distinguishes itself by utilizing a physics-driven engine that calculates frame-by-frame values using spring-based mathematical models. This approach enables natural movement and fluid transitions between visual states without the need for manual keyframe management. By leveraging a fine-grained reactivity syst

This is a personal portfolio website that uses scroll position to drive complex SVG scene animations, creating an interactive storytelling experience. The project is built around a scroll-synchronised animation controller that maps user scrolling to a timeline of interpolated state changes across a directed graph of visual elements, enabling fluid scene transitions. The site features a real-time animation state debugger that overlays a live HUD showing timing, active elements, and scene breakdown, with console commands for scene jumping and state export. It also includes a gradient-preserving

Portfolio-responsive-complete is a responsive web portfolio template built with core web languages that adapts automatically to any screen size. It functions as a frontend developer portfolio template, providing a personal showcase site designed with a mobile-first approach. The project incorporates mobile-first fluid layouts that adapt screen structures dynamically across devices, alongside declarative style encapsulation that organizes visual rules into structured stylesheets. It features event-driven DOM manipulation to update interface states dynamically in response to user interactions.