Motion Library Ranking
Choose the animation engine by the motion problem, not by what looks newest in a demo.
This page sits above Design Effects and Motion Sources for the common question: "which motion library should I use?" It does not replace Design and Animation or Interface Micro-Polish, which still own taste, accessibility, and verification.
Routing Summary
Load this page before adding animation dependencies or copying motion components. It ranks Motion.dev, Motion Primitives, Anime.js, GSAP, copy-paste effect libraries, and export/no-code options, then routes implementation review through Design Effects and Motion Sources, Design and Animation, and Interface Micro-Polish.
Version Snapshot
Checked against npm and official docs on 2026-07-07.
| Package | Latest | Published | Use when |
|---|---|---|---|
motion |
12.42.2 |
2026-06-30 | React, JavaScript, or Vue app motion needs production-grade layout, gesture, enter/exit, or spring animation. |
framer-motion |
12.42.2 |
2026-06-30 | Existing projects still import the older package name; prefer motion for new source unless the app convention says otherwise. |
animejs |
4.5.0 |
2026-06-22 | DOM, SVG, object, timeline, draggable, text, or framework-agnostic animation needs a compact JS engine. |
three |
0.185.1 |
2026-07-01 | Runtime WebGL/WebGPU scenes; route implementation through Web3D Library Ranking and Frontend and Design Skills. |
@react-three/fiber |
9.6.1 |
2026-04-28 | React-owned Three.js scenes; route implementation through Web3D Library Ranking and Frontend and Design Skills. |
gsap |
Check at implementation time | - | Scroll-driven, agency-grade, choreographed, or plugin-heavy animation warrants GSAP after license/performance review. |
Motion's official docs expose React, JavaScript, and Vue references plus examples and developer tools. Framer's current docs say Framer Motion is now Motion, so use "Framer Motion" as an alias/search term rather than a separate default. Anime.js 4 docs cover timers, animation targets, timelines, SVG, draggable, scroll, text, and React usage. Three.js/WebGL belongs in Web3D Library Ranking, not in ordinary UI motion. Source: Motion.dev, Framer, Anime.js, Three.js, R3F docs, 2026-07-07
Default Ranking
| Rank | Source | Best for | Boundary |
|---|---|---|---|
| 1 | Motion.dev | Product UI motion: layout transitions, presence, gestures, springs, shared layout, and framework-supported animation. | Keep product surfaces quiet. Use reduced-motion checks and avoid stacking perpetual motion. |
| 2 | Motion Primitives | Editable React/Tailwind animated primitives already built with Motion. | Use before writing custom Motion code for common primitives. |
| 3 | Anime.js / Frontend and Design Skills | Framework-agnostic DOM/SVG/object timelines, draggable experiments, text splitting, and compact animation sequences. | Good for custom choreography; less default React-layout ownership than Motion. |
| 4 | Frontend and Design Skills / GSAP Showcase | Scroll, timeline, pinned sections, agency-grade site motion, and advanced plugins. | Use when the choreography justifies the dependency and licensing. |
| 5 | React Bits, Fancy Components, Magic UI, Kokonut UI, Skiper UI, Cult UI | Copy-paste expressive effects, animated backgrounds, text effects, and special components. | Treat as source material. Retokenize, remove demo copy, and verify performance. |
| 6 | Unicorn Studio, Haikei, video/image export tools | Decorative motion or background treatment where runtime interactivity is not required. | Prefer static/video export when runtime shaders or animation add no product value. |
Adjacent WebGL Coverage
| Need | Route |
|---|---|
| Runtime 3D or WebGL/WebGPU scene | Web3D Library Ranking -> Frontend and Design Skills |
| React-owned 3D scene | Web3D Library Ranking -> Frontend and Design Skills |
| Shader/background material | Shader Effects Libraries -> Shaders.com / ShaderGradient / Shader Lab |
| No-code WebGL proof | Unicorn Studio |
Keep WebGL and Three.js out of ordinary app UI motion unless the interaction needs runtime 3D. If it does, use the Web3D route and verify canvas pixels/screenshots across desktop and mobile.
Selection Rules
- Repeated app UI defaults to Motion or existing local primitives.
- Marketing/portfolio animation can be more expressive, but one dominant motion language should carry the viewport.
- Timeline-heavy or scroll-heavy work must define the scroll map and performance budget before implementation.
- Decorative visual effects should have a still-state fallback and a reduced-motion path.
- Any copied effect must pass screenshot/video verification in the target viewport.
Timeline
- 2026-07-06 | Added the consolidated motion library ranking route with current Motion, framer-motion, and Anime.js package snapshots. Source: User request, 2026-07-06
- 2026-07-07 | Promoted Motion.dev as the first-class route for Motion.dev / Framer Motion, refreshed npm snapshots for
motion,framer-motion,animejs,three, and@react-three/fiber, and added adjacent WebGL coverage through Web3D Library Ranking, Frontend and Design Skills, and Frontend and Design Skills. Source: User request, 2026-07-07