SKILL.md
CSS Native — Zero-Dependency Animations & Visual Techniques
When to Use CSS Native vs Library
| Situation | Decision |
|---|---|
| < 3 animations on the page | CSS native |
| Scroll-driven reveal/parallax | CSS native (animation-timeline) |
Enter/exit from display: none |
CSS native (@starting-style + transition-behavior: allow-discrete) |
| Tooltip/popover positioning | CSS native (anchor positioning) |
| Page transitions (MPA or SPA) | CSS native (View Transitions API) |
| Complex multi-step timeline (5+ tweens) | GSAP |
| Stagger across dynamic list (unknown count) | GSAP or Framer Motion |
| Physics-based spring with interruption | Framer Motion |
| Morph between SVG shapes | GSAP MorphSVG |
Rule of thumb: if you can express it in a @keyframes + one animation-timeline, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values — reach for a library.
CSS Native — Zero-Dependency Animations & Visual Techniques
When to Use CSS Native vs Library
| Situation | Decision |
|---|---|
| < 3 animations on the page | CSS native |
| Scroll-driven reveal/parallax | CSS native (animation-timeline) |
Enter/exit from display: none |
CSS native (@starting-style + transition-behavior: allow-discrete) |
| Tooltip/popover positioning | CSS native (anchor positioning) |
| Page transitions (MPA or SPA) | CSS native (View Transitions API) |
| Complex multi-step timeline (5+ tweens) | GSAP |
| Stagger across dynamic list (unknown count) | GSAP or Framer Motion |
| Physics-based spring with interruption | Framer Motion |
| Morph between SVG shapes | GSAP MorphSVG |
Rule of thumb: if you can express it in a @keyframes + one animation-timeline, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values — reach for a library.