Animation implement
Implement web animations with the right engine (Motion, GSAP, Anime.js, React Spring, tailwindcss-motion) and a mandatory prefers-reduced-motion fallback at 60fps. Use when adding any motion to a site.From its SKILL.md
npx -y skills add m-binimran/dev-pack --skill animation-implementAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.7 KB, 353 tokens by cl100k_base, as published. Nobody here has run it
animation-implement
Pick one primary engine, animate cheap properties, and never ship motion without a reduced-motion path.
Choose the engine
| Need | Tool |
|---|---|
| React enter/exit, layout, stagger | Motion (motion/react) |
| Scroll timelines, pinning, parallax | GSAP + ScrollTrigger (useGSAP) |
| SVG path draw / morph | Anime.js (strokeDashoffset) |
| Physics / drag | React Spring |
| Zero-JS micro-interaction | tailwindcss-motion classes |
| Prebuilt animated marketing bits | Magic UI |
Primary = Motion (UI) or GSAP (cinematic scroll). Use the other sparingly. Don't ship both heavily.
MANDATORY reduced-motion (the reduced-motion-guard hook checks this)
- Motion:
useReducedMotion()→ zero distance/duration when reduced. - GSAP:
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;before building the timeline. - CSS: ship the global
@media (prefers-reduced-motion: reduce)reset. - Content must be fully visible/readable with motion off.
Performance
- Animate only
transform+opacity. No animating width/top/left (layout thrash). - 60fps — verify in DevTools Performance. Kill GSAP timelines on unmount (
return () => tl.kill()).
Output
- The animation code, the engine chosen + why, and the reduced-motion fallback shown explicitly.
Guardrails
- No looping/flashing/rapid motion (seizure risk) regardless of preference.
- Don't mix two heavy engines on the same surface.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.