css-native

# 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. --- ## Scroll-Driven Animations ### Scroll Progress Timeline Animate based on scroll position of a container. ```css .progress-bar { animation: grow-width linear both; animation-timeline: scroll(root block); } @keyframes grow-width { from { transform: scaleX(0); } to { transform: scaleX(1); } } ``` - `scroll(<scroller> <axis>)` — scroller: `nearest` | `root` | `self`, axis: `block` | `inline` | `x` | `y` - Default: `scroll(nearest block)` ### View Progress Timeline Animate as an element enters/exits the scrollport. ```css .reveal { animation: fade-i...