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 هي مكتبة JavaScript ووحدة تحكم في الرسوم المتحركة للواجهة الأمامية تقوم بتشغيل رسوم CSS المتحركة عندما تدخل العناصر إلى إطار عرض المتصفح أثناء التمرير. تعمل كمحرك تشغيل لإطار العرض، حيث تدير توقيت وتنفيذ الانتقالات المرئية للمحتوى الثابت والديناميكي في الصفحة. تدمج المكتبة أحداث التمرير مع رسوم CSS المتحركة والتأثيرات من مكتبات مثل Animate.css. تستخدم مراقبي التقاطع (intersection observers) لمراقبة الدخول إلى إطار العرض ومراقبي الطفرات (mutation observers) لتتبع وتطبيق مشغلات الرسوم المتحركة على العناصر الجديدة المضافة إلى DOM بعد الإعداد الأولي.

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

يوفر هذا المشروع أغلفة ومديري مكونات تؤتمت المزامنة بين رؤية لوحة مفاتيح البرنامج وموضع التمرير لعناصر الإدخال النشطة. إنه عرض تمرير لوحة مفاتيح جوال متعدد المنصات مصمم للحفاظ على مدخلات النص النشطة مرئية فوق لوحة مفاتيح البرنامج. تعمل المكتبة كغلاف مكون مدرك للوحة المفاتيح يكتشف أحداث لوحة مفاتيح البرنامج لمنع حجب حقول الإدخال. يستخدم أداة تمرير تركيز الإدخال التلقائي لحساب موضع التمرير الضروري والحفاظ على التركيز على المؤشر النشط. يغطي النظام معالجة إدخال واجهة مستخدم الجوال وتخطيط النموذج من خلال تعديل العرض التلقائي وتمرير الإدخال المركز. يدمج مستمعي أحداث لوحة المفاتيح لتشغيل تغييرات التخطيط وتحريك موضع العرض برمجياً إلى حقل نصي مركز.

هذا المشروع عبارة عن برنامج تعليمي شامل لرسوم CSS المتحركة ودورة رسوم متحركة للواجهة الأمامية منظمة. يعمل كمورد لتعلم حركة الويب مصمم لتدريس تنفيذ الانتقالات والرسوم المتحركة المرئية داخل المتصفح. يوفر المورد دليلاً لرسوم CSS ثلاثية الأبعاد، ويغطي عرض المشاهد ثلاثية الأبعاد والعمق. يتضمن تعليمات حول تصميم الحركة، بدءاً من الرسوم المتحركة التي يتم تشغيلها بالتمرير ورسوم متحركة لورقة العفاريت (Sprite sheet) إلى إنشاء رسوم متحركة معقدة لواجهة الويب. تغطي المادة قدرات أساسية مثل معالجة هندسة العناصر، والتحكم في وتيرة الرسوم المتحركة، وإدارة حالات التشغيل. كما تتناول مجالات تقنية بما في ذلك استيفاء الحالة، والعرض ثلاثي الأبعاد، ومزامنة رسوم متحركة متعددة. يمكن للمستخدمين تلقي دروس أسبوعية لتعلم تقنيات بصرية جديدة وأدلة رسوم متحركة.

هذه مكتبة رسوم متحركة React توفر مجموعة من المكونات لإنشاء حركة مصممة، وانتقالات معقدة، وتحويل SVG. تعمل كمواصفات لتصميم الحركة ونظام تغليف رسوم متحركة لمكونات واجهة المستخدم يُستخدم لتطبيق تحويلات ثلاثية الأبعاد، ومنحنيات Bezier، وانتقالات الدخول والخروج لعناصر الواجهة. يتضمن المشروع مجموعة رسوم متحركة تعتمد على التمرير لمزامنة حركات واجهة المستخدم وتأثيرات المنظر (parallax) مع موضع إطار العرض، بالإضافة إلى إطار عمل حركة SVG لتحريك المسارات، ورسم الخطوط بشكل تدريجي، واستيفاء الإحداثيات لتحويل الشكل. تغطي قدراتها مجموعة واسعة من الحركة المرئية، بما في ذلك التأثيرات المرئية ثلاثية الأبعاد مثل الدوارات الدوارة، وحركة تصور البيانات لاستيفاء الأرقام، وتجميعات الصفحات المقصودة التفاعلية. كما تدير رسومًا متحركة معقدة للمكونات للجداول والقوائم، وتوفر أدوات لتسلسل وربط الرسوم المتحركة لعناصر متعددة.

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.