citec-motion-system

Import gsap and ScrollTrigger only from the shared src/lib/gsap module, then apply data-reveal and data-reveal-delay attributes for standard entrance motion. Register triggers centrally and call ScrollTrigger.refresh() only after adding reveals or layout-affecting async content.

Keep Lenis ownership in a single src/lib/lenis.ts module and never create a second global Lenis instance. ScrollTrigger reads the scroll position that Lenis drives, so one shared instance keeps scroll-linked animations synchronized.

Create timelines inside effects with selectors scoped to local refs, then clean up with timeline.kill(), ctx.revert(), or scoped ScrollTrigger cleanup on unmount. Avoid ScrollTrigger.getAll() for broad cleanup unless the scope is intentionally global.

Yes, but it must be implemented explicitly. Reduced-motion users must see content immediately, so never animate required content from invisible to visible without a reduced-motion fallback that renders it visible by default.

Jank usually comes from animating layout properties instead of transform and opacity, creating refresh loops, or running heavy decorative canvases. Animate only transform and opacity, limit ScrollTrigger.refresh() calls, and validate with desktop and mobile QA.