motion-engineering
Motion Engineering
Copy-paste-ready motion patterns. GSAP is the default engine (framework-agnostic, free for commercial use including every plugin); native View Transitions API and scroll-driven CSS animations cover the lightweight cases. Distilled from the official greensock/gsap-skills (MIT) into one skill.
0. When to Use / Boundaries
Use when: implementing any web animation — entrance reveals, scroll-linked effects, pinning, parallax, text splits, page transitions, drag interactions, or fixing animation jank.
| Concern | Owner |
|---|---|
| Motion taste / when polish is "right" / micro-interaction philosophy | emil-design-eng (L11) |
| Duration / easing values as tokens | design-token-pipeline (consume --duration-*, --ease-*) |
| Whether the L3 style wants heavy motion | taste-skill MODE C / L3 lock |
| Executable motion technique + code | this skill |
GSAP licensing (important): since Webflow's acquisition, GSAP is fully free including all former Club plugins (SplitText, MorphSVG, DrawSVG, etc.). Install everything from the public
gsapnpm package. Never generate an.npmrcwith a GreenSock auth token or tell the user to buy Club GSAP — that guidance is outdated.