Awesome GitHub RepositoriesAnimation Libraries

This project is a high-level 3D graphics engine designed to render complex, hardware-accelerated environments within web browsers. It provides a comprehensive abstraction layer that manages scene graphs, cameras, and lighting, mapping high-level scene definitions onto low-level graphics APIs. By decoupling these definitions from specific hardware targets, the engine ensures consistent performance across diverse browsers and devices. The framework distinguishes itself through a robust architecture that includes a unified math library for high-frequency spatial calculations and a physically bas

Lottie-android is a native vector animation engine and library for Android that parses JSON specification files into high-fidelity animations. It functions as a JSON animation parser and renderer, translating After Effects exported data into native draw calls to maintain design fidelity on mobile devices. The library supports dynamic user interface control by allowing the modification of animation properties, such as colors, text, and shape attributes, during runtime playback. It also integrates with system-level accessibility settings to adjust playback and visibility in accordance with redu

Bodymovin is a motion graphics pipeline tool and plugin that exports After Effects animations into JSON files for native rendering on web and mobile platforms. It serves as a cross-platform animation bridge, converting complex vector motion designs into a portable Lottie format for use across different operating systems and frameworks. The project enables high-performance web animation by rendering motion graphics using SVG, Canvas, or HTML. It ensures consistent playback across diverse environments by converting dynamic expressions into static keyframes during the export process. The toolse

Pop is an animation library for iOS and macOS designed to manage property animations, value interpolation, and physics engines. It functions as a framework for linking animation engines to arbitrary object properties, extending beyond standard view attributes. The library features a physics-based animation engine that generates motion based on velocity, friction, and target values. This system enables the creation of spring and decay animations to simulate real-world dynamics. The project also provides tools for value interpolation using easing curves, display-link driven updates synced to s

This project is a declarative animation library and high-performance engine designed for creating fluid, interactive vector motion graphics on the web. It provides a specialized framework for defining, rendering, and orchestrating complex visual sequences, including custom geometric shapes and dynamic property transitions. The library distinguishes itself through a robust particle system framework that generates explosive or organic visual effects by emitting multiple shapes with randomized trajectories and paths. It utilizes a master timeline controller to synchronize independent animation i

Spring is a Swift animation library and iOS view animation framework. It provides a spring physics animation engine designed to generate realistic, organic motion for user interface movements. The framework utilizes a declarative animation interface, allowing developers to define animation properties and behaviors without writing complex imperative code. This includes a declarative animation workflow where motion is configured through visual storyboards. The system manages iOS UI animations and Swift view transitions, specifically automating how views appear and disappear through triggered a

Material-Animations is a Java-based library for coordinating activity transitions, property animations, and reveal effects within Android mobile user interfaces. It provides a framework for automating visual updates whenever view properties or layout configurations are modified. The project implements high-level patterns for shared element transitions, linking independent views across different sections to simulate a single moving element. It also includes circular reveal masking to unveil content from a specific focal point and coordinate-based view mapping to execute translation and scaling

AndroidViewAnimations is an animation library and visual effects toolkit for Android applications. It provides a framework for implementing motion effects, such as bouncing, sliding, and rotating transitions, for views within Android layouts. The library features a collection of predefined motion presets and stylized transition effects. These include curated sequences for shaking and pulsing to guide user attention, as well as complex movements like hinging or rolling for interface entry and exit. The toolkit covers a wide range of visual effects, including linear slides, elastic bounces, tr

laxxx is a lightweight JavaScript framework for creating scroll-driven animations and DOM element bindings. It functions as a CSS interpolation engine and animation utility that maps numeric driver values to HTML attributes and styles in real time. The framework specializes in linking visual properties to scroll position and velocity, featuring built-in inertia to smooth out transitions and prevent abrupt visual jumps. It utilizes a driver-based system to generate numeric streams from inputs like mouse movement or time, which are then transformed into CSS outputs through easing equations and

Odometer is a JavaScript number animation library and frontend UI tool designed to create fluid counting effects. It functions as a numerical transition component that updates numbers on a page using animated rolling or sliding transitions. The library focuses on numerical value animation and data transition effects, allowing users to transition smoothly between two numerical values. This is used for updating metrics and key performance indicators in dynamic dashboard visualizations to avoid abrupt jumps in data displays.

Rellax is a dependency-free vanilla JavaScript library and frontend utility used to create parallax web design effects. It functions as a scroll-based animation tool that moves page elements at different speeds to produce a sense of depth and layered motion. The library supports both vertical and horizontal parallax tracking for panoramic layouts and allows for motion speed control. It includes breakpoint-aware speed mapping to adjust movement based on screen width and provides viewport centering to position elements relative to the center of the screen. Beyond basic motion, the tool manages

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

animateplus هي مكتبة رسوم متحركة خفيفة الوزن لـ JavaScript، مصممة لإنشاء انتقالات بصرية عالية الأداء بمعدل 60 إطاراً في الثانية واستيفاء عددي لعناصر المواقع. تعمل كمحرك رسوم متحركة يعتمد على الوعود (promises)، وتستخدم أنماط async await لترتيب جداول زمنية معقدة للحركة وتأخيرات التوقيت. تتضمن المكتبة محاكياً لضبابية الحركة (motion blur) يطبق ضبابية السرعة الاتجاهية على محوري X و Y لمحاكاة السرعة العالية. كما توفر أداة استيفاء عددي للانتقال بين الألوان والخصائص الرسومية بين الحالات. يدير النظام التحكم في العناصر بأداء عالٍ، مما يسمح ببدء وإيقاف وتأخير الرسوم المتحركة بدقة. كما يدعم تأثيرات الحركة الديناميكية من خلال استدعاءات (callbacks) لكل إطار يمكنها تشغيل منطق خارجي أثناء تقدم الرسوم المتحركة.

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

Swup هي مكتبة انتقال الصفحة ومحمل صفحات AJAX مصمم لإنشاء انتقالات سلسة ومتحركة بين الصفحات على مواقع الويب التي يتم عرضها من جانب الخادم. تعمل كمنسق لمحتوى DOM ومدير لسجل المتصفح، حيث تعترض التنقل لاستبدال محتوى الصفحة ديناميكياً ومحاكاة تجربة تطبيق الصفحة الواحدة. يتميز المشروع من خلال نظام دورة حياة يعتمد على الخطافات (hooks) وبنية إضافات تسمح بحقن منطق مخصص وتأثيرات رسوم متحركة. يدعم طرقاً مرئية متقدمة بما في ذلك تحويل محتوى DOM، وعرض DOM المتوازي للرسوم المتحركة المتداخلة، والتكامل مع واجهة برمجة تطبيقات انتقالات العرض (View Transitions API) الأصلية للمتصفح. تغطي المكتبة مجموعة واسعة من الإمكانيات، بما في ذلك إدارة التنقل من جانب العميل، والتخزين المؤقت للصفحات القائم على الذاكرة، والتحميل المسبق للصفحات في الخلفية لتحسين الأداء. كما توفر استعادة شاملة لموضع التمرير، وتحسينات إمكانية الوصول لقارئات الشاشة، وأدوات لمزامنة بيانات تعريف رأس المستند وتنفيذ النصوص البرمجية عبر الانتقالات.

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

stroll.js هي مكتبة رسوم متحركة لواجهة المستخدم الأمامية مصممة لتحويل قوائم الويب القياسية إلى شاشات تمرير ثلاثية الأبعاد. تعمل كأداة لإنشاء منظورات قائمة على العمق باستخدام تحويلات CSS3. تتخصص المكتبة في رسوم متحركة الويب ثلاثية الأبعاد وتصميم القوائم التفاعلية. تنفذ تأثيرات مرئية تستجيب لحركة المستخدم، مما يضيف عمقاً مكانياً ومنظوراً لعناصر القائمة أثناء التنقل فيها.

react-flip-toolkit هو إطار عمل للانتقالات القائمة على الإحداثيات ومكتبة رسوم متحركة للتخطيط لـ React. يستخدم تقنية "الحركة السحرية" لحساب مواضع العناصر، مما يمنع القفزات المزعجة أثناء تغييرات التخطيط من خلال الاستيفاء والفيزياء. توفر المكتبة محرك حركة قائماً على الزنبرك (Spring-based) يستخدم إعدادات الصلابة والتخميد لإنشاء حركة طبيعية لتغييرات التخطيط والنمط. وتتضمن أدوات متخصصة لانتقالات العناصر المشتركة، والتي تنسق الحركات البصرية عبر تغييرات المسار في جانب العميل للحفاظ على الاستمرارية بين الصفحات المختلفة. يغطي النظام رسوم الانتقال للتخطيط واستيفاء الخصائص غير المتعلقة بالتخطيط. ويدير التوقيت من خلال تسلسل الرسوم المتحركة المتداخلة ويتضمن تحييد التحويل (Transform neutralization) لمنع العناصر الفرعية من التشوه عند تغيير حجم الحاوية الأصلية. كما يوفر إطار العمل مشغلات استدعاء (Callbacks) لتنفيذ المنطق في مراحل محددة من دورة الحياة.

Click effect inspired by Google's Material Design http://fian.my.id/Waves/

An application demoing meaningful motion on Android