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 关键帧动画和 3D 变换。它提供了一个无需编写手动样式表规则即可创建复杂动画序列的工具。 该库允许通过链接缩放、旋转、平移和倾斜变换来创建动画。这些生成的序列可以以唯一名称保存，以便在多个元素之间重复使用。 该系统通过在视觉序列完成时触发的回调函数来管理动画生命周期。它还包括一个兼容性检查器，以验证浏览器环境是否支持所需的 3D 变换和关键帧规范。

animateplus 是一个轻量级的 JavaScript 动画库，旨在为网站元素创建高性能的 60 FPS 视觉过渡和数值插值。它作为一个基于 Promise 的动画引擎，使用 async await 模式来编排复杂的运动时间轴和时间延迟。 该库包含一个运动模糊模拟器，可沿 X 和 Y 轴应用方向性速度模糊，以模拟高速运动。它还提供了一个数值插值工具，用于在不同状态之间转换颜色和图形属性。 该系统管理高性能元素控制，允许精确地启动、停止和延迟动画。它还通过逐帧回调支持动态运动效果，可以在动画过程中触发外部逻辑。

Rebound 是一个 Java 运动框架和物理引擎，旨在为用户界面动画创建自然的物理运动。它作为一个弹簧物理库，通过模拟力和振荡来驱动流畅的界面过渡。 该框架通过模拟现实世界的弹簧动力学和物理力来实现交互式运动设计，而非使用线性过渡。这使得在 Java 应用中创建有机运动成为可能。 该引擎通过基于弹簧的模拟处理物理动画，采用离散时间步长积分和与帧率无关的更新循环。它利用刚度和阻尼比等参数驱动的动力学，结合基于状态的运动插值来确定 UI 元素的位置。

Swup 是一个页面转换库和 AJAX 页面加载器，旨在为服务端渲染的网站创建无缝的动画页面转换。它作为一个 DOM 内容编排器和浏览器历史记录管理器，拦截导航以动态替换页面内容并模拟单页应用程序体验。 该项目的独特之处在于基于 Hook 的生命周期系统和插件架构，允许注入自定义逻辑和动画效果。它支持先进的视觉方法，包括 DOM 内容变形、用于重叠动画的并行 DOM 渲染，以及与原生浏览器 View Transitions API 的集成。 该库涵盖了广泛的功能，包括客户端导航管理、基于内存的页面缓存以及后台页面预加载以优化性能。它还提供了全面的滚动位置恢复、针对屏幕阅读器的无障碍优化，以及在转换过程中同步文档 Head 元数据和脚本执行的工具。

Moti 是一个跨平台动画框架和状态驱动的动画引擎，旨在跨移动端和 Web 平台创建一致的视觉过渡和运动效果。它作为一个原生线程动画包装器和库，利用共享值系统在逻辑层和原生渲染引擎之间同步状态变化。 该框架通过其布局过渡工具以及在原生线程上执行复杂序列和循环以保持高帧率的能力而脱颖而出。它提供了一个系统，用于协调组件进入或离开用户界面时的平滑入场和出场动画。 该项目涵盖了广泛的运动功能，包括使用命名变体的基于状态的样式过渡、关键帧序列以及将用户输入映射到视觉范围的交互式动画。它还包括用于动画加载状态的专用组件，例如闪烁的占位符。

stroll.js 是一个前端 UI 动画库，旨在将标准的 Web 列表转换为三维滚动显示效果。它作为一个利用 CSS3 变换（transforms）创建基于深度的透视效果的工具。 该库专注于 3D Web 动画和交互式列表设计。它实现了响应用户移动的视觉效果，在导航列表元素时增加空间深度和透视感。

react-flip-toolkit 是一个基于坐标的过渡框架和 React 布局动画库。它使用 magic-move 技术来计算元素位置，通过插值和物理效果防止布局偏移期间的突兀跳动。 该库提供了一个基于弹簧的运动引擎，使用刚度和阻尼设置来为布局和样式变化创建自然运动。它包含用于共享元素过渡的专用工具，这些工具协调跨客户端路由变化的视觉移动，以保持不同页面之间的连续性。 该系统涵盖了布局过渡动画和非布局属性插值。它通过交错动画序列管理时序，并包含变换中和功能，以防止父容器缩放时子元素变形。该框架还提供动画回调触发器，以在特定的生命周期里程碑执行逻辑。

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

An application demoing meaningful motion on Android