Animate on scroll

Adds scroll-linked animation that does not drag performance down or make anyone dizzy.

Cuándo se usa

When building a landing page, a hero or any section that appears as you scroll.

SKILL.md

# Animate on scroll

Add the requested animation following these rules. They are about performance,
not taste: skipping them shows on a mid-range phone.

## Rules

1. **Animate transform and opacity only.** Any other property forces layout work
   on every frame.
2. **Reveals use IntersectionObserver**, never a scroll listener. Disconnect the
   observer after the first hit if the element never hides again.
3. **If you need the exact scroll position**, read it inside requestAnimationFrame
   rather than in the event itself; keep the last value and drop the extras.
4. **No listeners without passive: true**, or the browser waits for your code
   before scrolling the page.
5. **prefers-reduced-motion is mandatory.** With the preference on, content
   appears without movement: never invisible.
6. **Short travel.** 12 to 24px of movement over 200 to 400ms is plenty. More
   than that feels slow, not elegant.

## Picking a tool

- Fade, slide, reveal: CSS plus IntersectionObserver, no library.
- React with sequences or gestures: Framer Motion.
- Complex scroll-driven timeline: GSAP with ScrollTrigger.
- Smooth scrolling: Lenis, and only when the design truly calls for it.

After touching the code, say what animates, what it was built with, and what
happens when reduced motion is on.

Pro sibling: if the project calls for deep parallax, spring-based gestures or scaling motion
amplitude down instead of switching it off, see the FrontLaxWeb skill.