A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern
Motion
The de-facto standard for React animation (formerly Framer Motion) — springs, gestures and layout animation in one place
Content updated · 2026-09-22
What is it · 它是什么
What is Motion?
Motion (formerly Framer Motion) is a production-grade animation library for React, JavaScript and Vue: independent transforms, scroll-driven animation, native gestures (hover/press/drag), layout animation, spring physics, exit animations and timeline orchestration, powered by a GPU-accelerated hybrid engine. Fully free and open source under MIT, with docs that also serve AI coding agents.
How to use · 怎么用
How to use Motion
- Start in React with the animate/motion components — enter and exit animations first.
- Layer in gestures (hover/press/drag) and spring physics for interaction.
- For scroll effects, follow the Scroll animation docs and match page rhythm.
Key features · 核心特点
Key features of Motion
- Spring physics and gestures out of the box
- Layout animation: position changes tween automatically
- GPU-accelerated hybrid engine, solid performance
- React and Vue ecosystems, MIT licensed
Related sites
Compose animations by stacking words - fade, up, slide - no keyframes, 3KB core
A front-end playground — a dense hub of motion snippets and experiments