neuro-shopify-animation

Add data-animate attributes to elements in your Liquid sections, include the animation-observer snippet, and define CSS hidden and visible states. The Intersection Observer adds an is-visible class when elements enter the viewport, costing about 500 bytes of JavaScript.

Load GSAP per-section using an Intersection Observer that injects deferred script tags only when the section approaches the viewport. Host gsap.min.js in the theme assets folder and reference it with the asset_url filter, never in theme.liquid head.

Prefer CSS-only animations first since they cost zero JavaScript, then CSS scroll-driven animations, then Intersection Observer with class toggles. Reserve GSAP for complex timelines, scrubbed parallax, or sequenced hero reveals that CSS cannot express.

It can if done wrong. Hero animations must start after LCP completes, animated elements need explicit dimensions to prevent CLS, and only transform and opacity should be animated. Starting states must keep elements occupying their layout space.

Every animation needs a reduced-motion fallback that shows the final state instantly or with a single subtle fade. Include a global media query that sets animation and transition durations near zero, and skip GSAP loading entirely when reduced motion is detected.

Layout thrashing happens when animating properties like width, height, top, left, or margin, which trigger reflow. Animate only transform and opacity, use translate instead of positional properties, and avoid transition: all in stylesheets.