GSAP is my go-to for animation on Shopify builds, but it's also the easiest way to tank a store's Core Web Vitals if you're not careful about how it's loaded and triggered. Here's the approach I use to get rich, scroll-triggered motion without paying for it in Lighthouse scores or real-world load times.
The first rule is to never ship GSAP as a blocking script. It should be deferred and loaded after the critical rendering path is done — Liquid's `{% javascript %}` tag combined with a deferred `<script>` tag keeps it out of the way of first paint. If a section doesn't need animation above the fold, its animation script has no business loading before the fold's content is visible.
Second, be deliberate about ScrollTrigger usage. Every ScrollTrigger instance adds a scroll listener and forces a layout recalculation on refresh, so on a long product page with a dozen animated sections, an unoptimized setup can cause visible jank on scroll, especially on mid-range mobile devices. I batch ScrollTrigger creation, use `fastScrollEnd` and `preventOverlaps` where relevant, and always call `ScrollTrigger.refresh()` only after images and dynamic content have actually loaded — not on a blind timeout.
Third, animate transforms and opacity, not layout properties. This is animation 101 but it's worth repeating in a Shopify context specifically, because theme sections often come with existing CSS that triggers reflow on hover or resize. Auditing a section's existing styles before adding GSAP animation to it catches most of the jank before it ships.
Finally, hydration control matters more than people think. On JSON template pages with many sections, I lazy-init animation logic per-section using IntersectionObserver so sections far below the fold don't register their GSAP timelines until they're about to enter the viewport. Combined with code splitting the animation bundle per template, this keeps JavaScript execution time low even on animation-heavy pages.
Done this way, you get the immersive, scroll-triggered brand experience that makes a store feel premium, while still hitting green Core Web Vitals. The two aren't in tension — they just require treating animation as something to budget and load intentionally, not bolt on as an afterthought.