GASP

# GASP

#SAP Scroll Animation Best Practices

## Layout & Timing

- Always delay scroll calculations - Use setTimeout(() => { ... }, 100) or requestAnimationFrame inside useLayoutEffect before measuring dimensions. DOM needs time to stabilize after mount.
- Measure the actual container, not window - Use containerRef. current. offsetWidth instead of window. innerWidth. Components may render in iframes, sandboxes, or nested layouts.

## Horizontal Scroll Setup

- Prevent flex shrinking - Always add flex-shrink-0 (or shrink-0 in Tailwind) to horizontal scroll items. Without it, flexbox compresses content to fit viewport, destroying scroll distance.
- Force container overflow - Parent track needs w-max or width: max-content to allow children to overflow. No overflow = no scroll distance

= no animation.

- Hide native scrollbar - Add overflow-x-hidden to the pinned wrapper to prevent double-scrolling.

## ScrollTrigger Configuration

- Always clean up - Return () => ScrollTrigger.kill() or ctx.revert() in useLayoutEffect cleanup. Stale triggers cause ghost animations and memory leaks.
- Use invalidateOnRefresh: true - Ensures recalculation on resize/orientation change.
- Pin the outer container, animate the inner track - Structure as: [pinned wrapper] > [horizontal track that translates XI.