Standardized choreography library for motion design with pre-tuned physics and easing equations.
The Moves Catalog
| Index | Move Name | Visual Description | GSAP Easing | Duration | Typical Usage |
|---|---|---|---|---|---|
| 01 | Rise | Card fades in while moving up 30 to 40 pixels | power3.out |
0.60s | Introducing primary UI cards |
| 02 | Pop | Scales up from 0.6 to 1.0 with subtle overshoot | back.out(2.5) |
0.45s | Success badges, icons, stickers |
| 03 | Count-up | Numbers roll smoothly from zero to target value | power2.out |
1.80s | Financial metrics and counters |
| 04 | Checklist tick | Items appear sequentially with green check marks | power2.out |
0.35s stagger | Feature verification lists |
| 05 | Typewriter | Sentence types itself character by character | steps(n) |
0.04s per char | Search inputs and terminal logs |
| 06 | Slide-in | Element slides in horizontally from viewport edge | power4.out |
0.40s | Notifications and side sheets |
| 07 | Blur-in | Element sharpens from 20px blur to crystal clarity | power2.inOut |
0.50s | Background shifts and titles |
| 08 | Punch-in | Whole viewport zooms in 15 percent suddenly | expo.out |
0.25s | Climax phrases and key quotes |
| 09 | Reframe | Full frame shrinks to card while new element rises | power3.inOut |
0.80s | Multi-step feature demos |
| 10 | Bar fill | Horizontal progress bar fills from 0 to 100 percent | power1.inOut |
1.20s | Loading bars and analytics stats |
Composing Combined Moves
Combine moves to create visual hierarchy:
- Primary hero elements use Pop or Punch-in to capture attention.
- Secondary supporting metadata uses Rise or Slide-in.
- Background atmospheric elements use Blur-in or gentle continuous drifts.
Code Examples and Recipes
- references/gsap-recipes.md for ready-to-run GSAP timeline code snippets.