Waapi Vs Motion
Interactive presentation: Web Animations API vs Motion — when to use the browser, when to reach for a library
WAAPI vs Motion
An interactive presentation exploring when to use the Web Animations API and when to reach for Motion (formerly Framer Motion).
Built for an R&D knowledge sharing session.
View the presentation
What's covered
- WAAPI — native browser animation API, zero dependencies, GPU-accelerated
- Motion — declarative library with springs, gestures, layout animations
- Live interactive demos for each concept (staggering, scroll-driven, drag, springs)
- Side-by-side comparison and decision framework
Tech stack
| Layer | Tool |
|---|---|
| Framework | SvelteKit + Svelte 5 |
| Presentation | Reveal.js |
| Styling | Tailwind CSS 4 |
| Code blocks | Shiki + Shiki Magic Move |
| Animations | @animotion/motion + Motion v12 |
| Deployment | GitHub Pages |
Run locally
pnpm install
pnpm dev
Controls
| Key | Action |
|---|---|
| Arrow keys | Navigate slides/fragments |
M |
Toggle dark/light mode |
F |
Fullscreen |
O |
Overview mode |
License
MIT
