Stop guessing which one. Put them side by side.

The grid says what these tools are. This says what builders did about it — one decision per person, changeable whenever you change your mind.

# Tool comparison — Rive vs GSAP + ScrollTrigger vs Motion (was Framer Motion)

Source: Kbaise, a directory of tools that work with Lovable projects.
Pick one and tell me why before writing any integration code.

## Rive (rive)
- URL: https://rive.app/docs/
- Category: Animation & motion
- Cost: paid — Runtimes free MIT · publishing $9/seat/mo
- What it is: Design tool plus lightweight runtime for interactive vector animation — the Lottie alternative. You build a state machine so the animation responds to inputs, export a tiny .riv file, and drive it from code.
- Why builders pick it: Only worth it if you have three or more animations to amortize the WASM and a designer to own the files. An unowned .riv is an opaque binary nobody can edit.
- Trap: Publishing moved behind a paywall in Oct 2025 — the free tier cannot export a .riv for production. And the runtime is 88 kB JS plus a 725 kB gzipped WASM binary (304 kB on canvas-lite), fetched from unpkg by default — self-host it and call RuntimeLoader.setWasmUrl().
- Wiring: npm install @rive-app/react-canvas
- Full dossier: /api/public/tools/rive

## GSAP + ScrollTrigger (gsap-scrolltrigger)
- URL: https://gsap.com/docs/v3/
- Category: Animation & motion
- Cost: free — Free — all plugins, since 2025
- What it is: Framework-agnostic animation engine whose differentiator is the timeline model: sequence, offset, nest, reverse and scrub complex choreography with precise control. ScrollTrigger handles scroll-driven and pinned animation; SplitText does per-character reveals.
- Why builders pick it: This is the scrolled-feature-article tool. Pinned photo sequences, a headline that assembles as you scroll, a timeline piece that scrubs — that is ScrollTrigger, and nothing else comes close. Webflow acquired GreenSock and made every formerly-paid plugin free in 2025. Core + ScrollTrigger + SplitText is ~49 kB gz.
- Trap: Free but not OSI open source — a custom Webflow-owned licence that bars using GSAP inside competing no-code animation builders. Building scroll-driven features with it is squarely permitted. Release cadence has slowed to 2–3/year under Webflow.
- Wiring: npm install gsap @gsap/react
- Full dossier: /api/public/tools/gsap-scrolltrigger

## Motion (was Framer Motion) (motion)
- URL: https://motion.dev/docs/react
- Category: Animation & motion
- Cost: free — Free MIT · Motion+ €299 once
- What it is: Renamed from Framer Motion and spun out as an independent MIT project at motion.dev. Declarative animation via props, AnimatePresence for exits, layout/layoutId for shared-element transitions, variants for staggering, useScroll for scroll-linked values.
- Why builders pick it: Page and route transitions between article and index, staggered card reveals on the issue grid, image-to-lightbox shared-element morphs. Composes cleanly with Tailwind and shadcn. Use LazyMotion + the m component to land near 18 kB instead of 38 kB.
- Trap: Do not build long scroll narratives with useScroll — once you need pinning and scrubbing you are rebuilding ScrollTrigger badly. Do not wrap hundreds of list items in motion.div.
- Wiring: npm install motion
- Full dossier: /api/public/tools/motion

## Quick read

- Free with no card: GSAP + ScrollTrigger, Motion (was Framer Motion).
- Editor's picks: GSAP + ScrollTrigger, Motion (was Framer Motion).

## Rules
1. Prefer the free tier when no budget was stated, and say what the ceiling is.
2. Read the full dossier before integrating.
3. Fetch /api/public/models before writing any AI model ID.

Agents can fetch the same thing: GET /api/public/compare?slugs=rive,gsap-scrolltrigger,motion