Awesome GitHub RepositoriesAnimation Orchestrators

React-spring is a physics-based animation library designed to create fluid, natural motion for user interface elements and three-dimensional objects. It functions as a declarative motion framework that maps state changes to animated property values, utilizing spring physics—defined by mass, tension, and friction—rather than traditional time-based easing functions to calculate transitions. The library distinguishes itself through a rendering-agnostic architecture that decouples animation logic from specific UI frameworks, allowing for consistent application across web interfaces, 3D scenes, an

Velocity is a JavaScript animation library used to create high-performance CSS and SVG animations. It functions as a CSS property interpolator and a spring physics engine, enabling the creation of smooth visual transitions and organic movement for web elements. The project provides a programmatic interface for modifying vector attributes and 3D transformations through its SVG animation framework. It further distinguishes itself as an animation sequence orchestrator, allowing for the chaining of movements and the staggering of start times across multiple elements using promises. The library c

Inferno is a virtual DOM UI library and high-performance DOM renderer used for building component-based user interfaces. It functions as a server-side rendering engine and a client-side framework that synchronizes application state with the visual interface through a declarative structure. The project distinguishes itself as a React-compatible UI framework, providing a compatibility layer that allows components designed for other reactive environments to run without modification. Its capability surface covers virtual DOM management, including node diffing and reconciliation, and a full serve

Barba is a JavaScript page transition library that intercepts browser navigation to swap page content and animate transitions without a full page refresh. It functions as an AJAX page loader and client-side navigation manager, coordinating the lifecycle of transitions through hooks and custom logic during view changes. The library distinguishes itself as a frontend animation orchestrator that triggers specific visual effects and scripts based on the source and destination of a website page. It employs a rules-based system to resolve which specific animation or transition to execute by matchin

This project is a transition component library for React that manages CSS animations during the mounting and unmounting of components. It functions as a CSS class state manager and animation orchestrator, applying specific class sequences to track the entry and exit states of elements. The library coordinates the timing and sequence of multiple elements entering or leaving the screen. This includes managing synchronized group transitions for lists and triggering visual animations when switching between different URL routes. The system covers a range of transition capabilities, including stat

jss is a CSS-in-JS styling library and dynamic style engine that allows for the authoring of CSS properties as JavaScript objects. It functions as a tool for defining visual rules programmatically to manage application appearance and bind styles to JavaScript data. The project distinguishes itself through a specialized implementation of container queries, which adjust element layouts based on the dimensions of parent containers. It also acts as a CSS animation orchestrator, creating scoped keyframe sequences and transitions controlled via JavaScript logic. The library provides capabilities f

Moti هو إطار عمل للرسوم المتحركة عبر المنصات ومحرك رسوم متحركة يعتمد على الحالة، مصمم لإنشاء انتقالات مرئية وتأثيرات حركية متسقة على تطبيقات الجوال والويب. يعمل كمكتبة وواجهة للرسوم المتحركة على مستوى الخيط الأصلي (native-thread)، ويستفيد من نظام القيم المشتركة لمزامنة تغييرات الحالة بين طبقة المنطق ومحرك العرض الأصلي. يتميز إطار العمل بأدوات انتقالات التخطيط والقدرة على تنفيذ تسلسلات وحلقات معقدة على الخيط الأصلي للحفاظ على معدلات إطارات عالية. كما يوفر نظاماً لتنسيق رسوم الدخول والخروج السلسة عند دخول المكونات إلى واجهة المستخدم أو خروجها منها. يغطي المشروع مجموعة واسعة من إمكانيات الحركة، بما في ذلك انتقالات الأنماط القائمة على الحالة باستخدام متغيرات مسماة، وتسلسل الإطارات الرئيسية (keyframes)، والرسوم المتحركة التفاعلية التي تربط مدخلات المستخدم بنطاقات مرئية. كما يتضمن مكونات متخصصة لحالات التحميل المتحركة، مثل تأثيرات الوميض (shimmering placeholders).

Motion-vue is a declarative animation library for Vue that provides a framework for building fluid, high-performance user interface motion. It enables developers to define complex animation states and transitions using code-based variants and spring-driven physics, ensuring that visual updates remain synchronized with component lifecycles and application state. The library distinguishes itself through a layout projection engine that tracks element coordinates to animate transitions between layout states, and a gesture-driven input pipeline that maps pointer and scroll interactions to animatio

Animated هو إطار عمل تصريحي مصمم لإنشاء حركات واجهة عالية الأداء ومتعددة المنصات. يوفر نظاماً لتحديد انتقالات واجهة المستخدم المعقدة من خلال استيفاء الخصائص (property interpolation)، وتعيين القيم، والحركة القائمة على الفيزياء، مما يسمح للمطورين بتنسيق تأثيرات بصرية انسيابية دون الحاجة لتحديثات الإطارات يدوياً. تتميز المكتبة بنقل تعليمات الرسوم المتحركة إلى خيط واجهة المستخدم الأصلي (native UI thread)، مما يضمن أداءً متسقاً عبر بيئات الجوال والويب. وهي تدعم تصميم الحركة المتطور من خلال ربط متغيرات الرسوم المتحركة المتعددة ببعضها البعض، مما يتيح تأثيرات تتابعية منسقة وانتقالات متعددة الخصائص تستجيب مباشرة لإيماءات المستخدم. يتضمن إطار العمل مجموعة شاملة من الأدوات لإدارة رسوم بيانية للتبعيات ومنطق خاص بالمنصة. ومن خلال استخدام نمط المحول المجرد (abstractated adapter pattern)، فإنه يضمن بقاء عمليات المحاكاة القائمة على الفيزياء وتطبيقات خصائص الأنماط متسقة عبر منصات مستهدفة متنوعة.

React-simple-animate is a declarative motion framework designed for building CSS keyframe animations and style transitions within web interfaces. It functions as a utility for orchestrating complex, multi-step visual effects by defining style sequences, timing, and easing properties directly within component logic. The library distinguishes itself through its focus on sequencing and coordination, allowing developers to chain multiple animation instances or group them to execute in specific orders. By utilizing functional hooks and declarative properties, it manages animation lifecycles and st

React-anime هو إطار عمل حركة تصريحي مصمم لدمج قدرات الرسوم المتحركة في واجهات المستخدم القائمة على المكونات. يعمل كمكتبة لتحريك خصائص CSS و SVG و DOM عن طريق تعيين خصائص المكون مباشرة إلى حالات الرسوم المتحركة، مما يسمح للمطورين بتحديد الحركة من خلال بنية قائمة على المكونات. تتميز المكتبة بقدرتها على إدارة تسلسلات الرسوم المتحركة الهرمية وانتقالات دورة الحياة المؤتمتة. توفر أدوات لتنسيق تأثيرات الحركة المعقدة والمتداخلة وتتعامل مع دخول وخروج العناصر عند إضافتها إلى الواجهة أو إزالتها منها. من خلال استخدام تعيين الحالة القائم على الخصائص (prop-driven)، فإنها تقوم بمزامنة الحركة المرئية مع تغييرات البيانات الأساسية. بعيداً عن الانتقالات الأساسية، يدعم إطار العمل إنشاء تأثيرات متتالية من خلال حسابات التوقيت والتأخير المتداخلة. يمكن من تجميع حاويات رسوم متحركة متعددة لتنسيق الحركة المتزامنة عبر عناصر الواجهة ذات الصلة. يتم توزيع المشروع كحزمة قائمة على TypeScript للاستخدام داخل أشجار المكونات.