Awesome GitHub RepositoriesAnimation and Motion

Animate.css is a CSS animation library and browser-based motion framework. It provides a collection of pre-made animations and motion effects used to add visual movement to web elements across different browsers. The library is designed as an accessibility-aware system that automatically disables animations when the operating system has a reduce motion setting enabled. This ensures that web motion respects user preferences for accessibility. The framework covers front-end visual effects and cross-browser UI styling. It utilizes a utility-first architecture with predefined style classes to ma

Impress.js is a browser-based presentation engine that transforms standard document elements into interactive, three-dimensional slide decks. It functions as a declarative layout framework, allowing users to define spatial relationships and visual perspectives for content within a coordinate-based canvas. By leveraging the browser's native rendering capabilities, it enables the creation of non-linear slide decks that utilize hardware-accelerated transformations for movement and perspective shifts. The framework distinguishes itself through a state-driven controller that manages active content

particles.js is a JavaScript particle animation library and visual effects engine used to create interactive, canvas-based simulations for web interfaces. It enables the generation of dynamic background animations and networked visual effects through coordinate-based particle movements. The library features a system for drawing connecting lines between particles based on proximity to create network-style visualizations. It includes mechanisms for mapping mouse movements and click events to specific particle behaviors, such as attraction or repulsion. Users can configure particle density, opa

GreenSock-JS is a JavaScript animation library and framework designed for animating CSS properties, SVG attributes, and JavaScript values. It functions as a scroll-driven animation engine and a sequencing system for coordinating multiple animations into a single timeline for precise execution across web browsers. The project provides tools for creating interactive scroll effects by linking animation progress to a user's scroll position. It also includes a responsive animation framework that adjusts behaviors and timing based on media queries to maintain consistency across different device scr

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

Auto-animate is a framework-agnostic JavaScript animation library used to automatically animate the entry, exit, and movement of elements within a document. It functions as a transition tool that adds smooth motion to web application elements to prevent abrupt layout jumps during content changes. The utility is designed to be reduced motion compliant, automatically detecting and respecting system-level accessibility settings to disable animations for users with motion sensitivities. It also features a plugin system that allows the replacement of default fade and scale transitions with custom

Material is a mobile user interface framework designed for building responsive and consistent native applications. It provides a declarative component architecture that allows developers to construct complex interfaces through modular, self-contained elements that manage their own state and rendering logic. The framework distinguishes itself through a constraint-based layout engine that calculates component geometry by solving spatial relationships between elements, ensuring layouts adapt automatically to varying screen sizes. It also features a hierarchical design system that propagates styl

This project is a curated collection of galleries and component libraries that demonstrate pure CSS visual effects, 3D transforms, animation patterns, and layout solutions. It serves as a visual catalog of interactive UI elements and graphics built exclusively with HTML and CSS. The collection distinguishes itself by implementing complex interactivity, such as state management and animation triggers, using only CSS pseudo-classes and keyframes without any JavaScript. It also features a system for generative art and algorithmic patterns, as well as spatial 3D constructions using perspective an

Effeckt.css is a hardware-accelerated CSS animation library and UI transition framework. It provides a collection of styles designed to create smooth element entrances, exits, and attention-grabbing visual effects while preventing visual stuttering during interface transitions. The library focuses on high-performance animations using GPU-accelerated properties to ensure fluid movement. It enables the simulation of application navigation by sliding page views in and out of the viewport from specified directions. The framework covers a suite of visual capabilities, including directional entran

tsparticles is a JavaScript particle engine and canvas visual effects toolkit used to create animated particle systems, interactive backgrounds, and web animations. It functions as a web animation library that provides a set of compatible wrappers for integration into React, Vue, Angular, and Svelte applications. The engine includes pre-built animation patterns for celebratory effects, such as confetti explosions and fireworks. It allows for the creation of custom JavaScript visualizations through a plugin system that enables the development of specialized shapes and behaviors. The toolkit s

dynamics.js is a physics-based JavaScript animation engine designed to create spring and bounce animations. It utilizes the browser animation frame loop to ensure motion is synchronized with the refresh rate. The engine includes tools for animation debugging, allowing users to slow down or freeze active motions to tune parameters. It also features a timing mechanism that executes callbacks synchronized with the animation frame rate to prevent visual stuttering. The project provides a physics solver based on mass, stiffness, and damping constants. Additionally, it includes a utility for apply

This project is a jQuery plugin and animation extension that enables hardware-accelerated CSS3 transitions and transformations. It serves as a wrapper that shifts animation logic from script-based updates to native browser style transitions. The library provides tools for managing the scale, rotation, and orientation of page elements. It uses relative-value coordinate calculations to handle element movement and maps generic transformation properties to browser-specific vendor prefixes. The capability surface covers high-performance visual effects, including the management of timing and easin

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

本仓库是一个参考实现与图库合集，展示了 Android View 系统的最佳实践。它提供了一套用于构建用户界面的实用示例，包括组件库以及针对布局、列表性能与运动设计的实现指南。 该项目通过用于协调布局动画与过渡效果的详细示例脱颖而出。它包含针对使用关键帧与插值器的复杂运动动画的专门演示，以及用于确定运动参数的动画插值曲线可视化工具。 代码库涵盖了广泛的能力领域，包括带有视图回收与差异化更新的高性能列表管理、带有标签同步的分页导航，以及针对多窗口与分屏模式的界面适应性。它还包括针对卡片布局、嵌入式 Web 内容以及针对页面过渡的自动化 UI 测试的示例。

这是一个全面的 CSS 动画教程和结构化的前端动画课程。它是一个 Web 动效学习资源，旨在教授如何在浏览器中实现视觉过渡和动画效果。 该资源提供了 CSS 3D 动画指南，涵盖了三维场景渲染和深度效果。内容包括动效设计，从滚动触发动画、雪碧图（sprite sheet）动画到复杂的 Web 界面动画制作。 该材料涵盖了核心能力，如操作元素几何形状、控制动画节奏和管理播放状态。它还涉及状态插值、3D 渲染以及多个动画同步等技术领域。 用户可以订阅每周教程，学习新的视觉技术和动画指南。

InstaMaterial 是一个适用于 Android 的 Material Design 社交媒体界面实现。它作为一个移动应用程序前端和导航框架，具有可滚动的内容流、用户个人资料和交互式社交参与元素。 该项目以其复杂的运动设计而著称，包括从特定触摸坐标在屏幕间过渡的圆形揭示动画，以及协调平移、透明度和缩放变换的序列化进入效果。它还实现了一个自定义相机集成系统，利用着色器在照片发布工作流中进行圆形图像裁剪和位图处理。 该框架涵盖了广泛的界面功能，包括 Activity 栈管理、程序化导航抽屉注入和社交流管理。它结合了具有涟漪反馈、数值计数器状态驱动文本切换以及输入错误和上传进度专门动画的交互式组件设计。

OpenCat-Quadruped-Robot 是一个用于构建四足机器人的开发框架和运动控制 API。它提供了一个全面的四足机器人开发环境，具有步态设计、逆运动学，以及将高级智能与低级运动分离的分层控制架构。 该项目作为一种嵌入式 AI 部署工具脱颖而出，允许用户训练、量化机器学习模型并将其部署到视觉模块，以执行对象检测和视觉目标跟踪等任务。它还通过离线语音命令处理、人体运动模仿以及用于图形逻辑生成的视觉块编程界面，支持复杂的人机交互。 该系统涵盖了广泛的功能面，包括通过 IMU 数据实现的实时平衡稳定、使用 3D 相机的自主导航，以及通过蓝牙和 WiFi 的各种远程控制接口。它还包括用于机器人步态模拟、强化学习策略迁移的工具，以及用于外部软件集成的专用 Python API。 固件管理通过一套部署工具处理，支持主板和微控制器模块的 USB、蓝牙和无线 (OTA) 更新。

move.js 是一个 JavaScript 运动引擎和 CSS3 动画框架，旨在为 DOM 元素添加动画效果。它作为一个 DOM 动画库，随时间改变视觉元素的属性和颜色。 该库充当 CSS 贝塞尔缓动控制器，使用三次贝塞尔曲线（cubic-bezier curves）来管理动画的加速和减速。它支持顺序运动设计，允许多个视觉步骤按特定顺序执行。 该框架涵盖了元素属性（如位置、旋转、缩放、倾斜和颜色）的动画。它提供了 UI 组件过渡功能，并支持应用缓动函数以创建自然的运动效果。

这是一个 React 动画库，提供了一系列组件，用于创建编排运动、复杂过渡和 SVG 形态变换。它作为一个运动设计规范和 UI 组件动画封装系统，用于将 3D 变换、贝塞尔曲线和进入-退出过渡应用于界面元素。 该项目包括一个滚动驱动的动画套件，用于将 UI 运动和视差效果与视口位置同步；以及一个 SVG 运动框架，用于动画化路径、增量绘制线条以及插值坐标以进行形状变换。 其功能涵盖了广泛的视觉运动，包括旋转轮播图等 3D 视觉效果、用于数值插值的数据可视化运动，以及交互式落地页组件。它还管理表格和列表的复杂组件动画，并提供用于对多个元素进行排序和链接动画的工具。

Navigation2 是一个用于自主移动机器人的 ROS 2 导航框架。它提供了路径规划器、代价地图管理系统、运动学控制器和行为树编排器的核心功能，用于计算无碰撞路径并执行移动指令。 该框架的特色在于使用行为树来协调模块化任务服务器，从而实现复杂的导航流程和自主恢复动作。它支持插件式架构，允许在运行时切换规划器和控制器，以适应不同环境。 该系统涵盖了广泛的功能，包括全局和局部路径规划、2D SLAM 和基于地图的定位，以及通过网格代价地图进行的环境建模。它管理各种传动系统的运动控制，并集成了用于碰撞监控和紧急预防的安全系统。其他编排功能包括多目的地路径点排序、动态目标跟踪和自动对接程序。 该框架利用生命周期管理组件来协调操作服务器的启动、关闭和健康监控。