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.
Specialized Output Route
Use Scroll World before this library ranking when the requested product is
specifically a generated fly-through brand world, isometric diorama journey, or
scroll-controlled cinematic landing page. That route scrubs pre-rendered video;
it does not own interactive Three.js state or ordinary DOM animation. Its
acceptance contract is frame and velocity continuity, paid-provider approval,
seek/decode performance, native portrait composition, reduced motion, and
independent playback proof. Use GSAP/Motion when the page can remain semantic
DOM choreography, Three.js/R3F when scene state must remain interactive, and
HyperFrames when the deliverable is a standalone authored video. Source: oso95/scroll-world@71cc36d3, reviewed 2026-08-12
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 Cloud, Data, and Service 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, Originkit, 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. For hosted registries, freeze the exact delivered payload, dependencies, and component terms independently of the site or CLI license. Retokenize, remove demo copy, and prove semantics, reduced motion, lifecycle cleanup/suspension, and 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 -> Cloud, Data, and Service 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-08-12 | Added Originkit to the copy-paste effect tier after inspecting the exact saved video, live inventory, registry metadata, MIT CLI, and representative Motion/GSAP/canvas payloads. It is recommended only for one named effect with payload, rights, dependency, accessibility, lifecycle, and performance proof; the saved “250+” count and MIT CLI do not certify the component catalog. Source: X
2081620717775237573; Originkit live registry; npmoriginkit@0.2.23 - 2026-08-12 | Added Scroll World as a specialized output route before
general library selection and separated pre-rendered scroll cinema from DOM
choreography, runtime 3D, and authored standalone video. Source: X
2075033878352494824;oso95/scroll-world@71cc36d3 - 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 Cloud, Data, and Service Skills. Source: User request, 2026-07-07