Smooth scroll animations can elevate a website from good to great. But implementing them poorly creates janky, frustrating experiences. GSAP's ScrollTrigger plugin makes it easy to do it right.
Why GSAP?
CSS animations are great for simple transitions. But for complex, scroll-driven animations, GSAP is unmatched. It's performant, flexible, and has the best developer experience of any animation library.
ScrollTrigger specifically is a game-changer. It handles all the scroll event optimization, intersection observation, and timeline scrubbing for you.
Setting Up GSAP in Nuxt 3
Installing GSAP in Nuxt is straightforward. Add it as a dependency, import it in your components, and you're ready to animate.
The key is registering ScrollTrigger as a plugin. This gives you access to all its features while keeping your bundle size small (only importing what you use).
Your First Scroll Animation
Let's start simple: fade in an element as it scrolls into view. This is the hello world of scroll animations.
The basic pattern is: create a GSAP timeline or tween, attach a ScrollTrigger to it, and define when it should play based on scroll position.
The trigger property defines which element to watch. The start and end properties define when the animation starts and ends based on scroll position.
Scrubbing Animations
The magic of ScrollTrigger is scrubbing. Set scrub to true (or a number for smoothing), and your animation progress is directly tied to scroll position.
Scroll down? Animation plays forward. Scroll up? Animation plays backward. It's perfectly in sync with the user's scroll.
This creates that premium feel you see on high-end agency sites.
Pinning Sections
One of ScrollTrigger's killer features is pinning. You can pin an element in place while other content scrolls over it, all while running animations.
This is perfect for hero sections, interactive diagrams, or any time you want to focus attention on one element while the user scrolls.
Horizontal Scrolling
Vertical scrolling is standard, but horizontal scrolling creates unique layouts. ScrollTrigger makes this trivial with the horizontal scrub property.
You can create a horizontal scrolling section that activates on vertical scroll. Users scroll down normally, but content moves horizontally.
Performance Considerations
GSAP is performant out of the box, but there are best practices:
- Animate transform and opacity (GPU-accelerated)
- Avoid animating layout properties (width, height, top, left)
- Use will-change sparingly and only when needed
- Kill ScrollTrigger instances when components unmount
Nuxt-Specific Tips
In Nuxt, initialize ScrollTrigger in onMounted, not on the top level. SSR means your component renders server-side where there's no window or scroll.
Store ScrollTrigger instances in refs if you need to access them later for cleanup or updates.
Always clean up in onUnmounted to prevent memory leaks when navigating between pages.
Parallax Effects
Parallax—elements moving at different speeds while scrolling—is easy with ScrollTrigger. Just set different scrub values or use the scrub property with specific values.
Subtle parallax adds depth without being distracting. Heavy parallax creates wow factor but can make users dizzy. Use judiciously.
Stagger Animations
Want multiple elements to animate in sequence as you scroll? GSAP's stagger property makes this trivial.
Pass an array of elements and a stagger value, and ScrollTrigger handles the timing automatically.
Debugging
ScrollTrigger has built-in debugging markers. Enable them during development to see exactly when triggers fire and where start/end points are.
This visual feedback makes tuning animations much easier than guessing scroll positions.
The Result
With GSAP and ScrollTrigger, you can create:
- Smooth fade-ins and slide-ins
- Parallax effects
- Horizontal scroll sections
- Pinned content
- Interactive timelines
All performant, all smooth, all delightful.
Wrapping Up
GSAP and Nuxt 3 are a powerful combination for creating engaging scroll experiences. Start with simple fade-ins, then experiment with pinning and parallax.
Your users might not consciously notice the animations, but they'll definitely feel the premium experience you've created.