GSAP scroll reveals without layout thrash

Scroll animations fail when they run on every element individually without cleanup, or when they animate properties that trigger layout. I default to transform and opacity, batch with stagger, and run once.

A single composable, one context

export function useGsapScrollReveal(options = {}) {
  onMounted(() => {
    ctx = gsap.context(() => {
      gsap.from(targets, { opacity: 0, y: 40, scrollTrigger: { once: true } });
    });
  });
  onUnmounted(() => ctx?.revert());
}

Reduced motion is not optional

If matchMedia('(prefers-reduced-motion: reduce)') matches, skip timelines entirely and set final styles immediately. Accessibility and performance align here.

• Prefer ScrollTrigger once: true for reveal sections.
• Avoid animating width, height, or top on large lists.
• Revert gsap.context on route change in SPA navigation.