Creating an animated website Using GSAP with Next.js and Tailwind CSS

As a developer who appreciates seamless UI/UX and smooth transitions, discovering GSAP (GreenSock Animation Platform) felt like finding a cheat code to modern frontend animation. In this blog, I’ll walk you through why GSAP is a top-tier animation library, how I used it in a Next.js project styled with Tailwind CSS, and some key concepts like ScrollTrigger, Timeline, scrub, pin, and motion along x, y axes.

Getting Started: Next.js, Tailwind, and GSAP
Before we get into the fun parts, here's the basic stack I used:

• Next.js for a powerful React-based framework with SSR support.
• Tailwind CSS for utility-first styling (which makes it a breeze to build responsive layouts).
• GSAP for smooth, performant animations.

Now installing GSAP is very simple :

npm install gsap

In Next.js, you can import and use it within useEffect like so:

import { gsap } from 'gsap';

useEffect(() => {
  gsap.to(".box", { x: 100, duration: 2 });
}, []);

This alone already animates elements effortlessly — but the real power lies ahead.

So here's why GSAP is Awesome
GSAP isn’t just another animation library — it’s fast, intuitive, and incredibly powerful. Here's why:

• Performance-First: It’s optimized for high performance, making your animations buttery smooth.
• Fine Control: GSAP gives you pixel-level control over your animations.
• Flexible Syntax: You can chain animations, create timelines, and control playback easily.
• Scroll-Based Animations: Combine it with ScrollTrigger to create dynamic interactions based on scroll position.

The Magic of ScrollTrigger
ScrollTrigger is an official GSAP plugin that enables you to:

• Trigger animations when an element enters the viewport.
• Pin sections during scrolling (parallax and other effects).
• Sync animations with scroll progress (scrub).
• Animate based on scroll position.

import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom center",
    scrub: true,
    pin: true
  },
  x: 300,
  duration: 3
});

Understanding Key Concepts
scrub
Scrub syncs the animation's progress with the scrollbar. This means the animation progresses as you scroll. It can take a boolean or even a smoothing number like scrub: 1.5.

pin
Pin keeps the element fixed while you scroll through the section. Great for storytelling layouts or full-screen sections.

x and y
These properties control the horizontal (x) and vertical (y) movement of an element. You can move elements in 2D space, which is key for dynamic transitions.

gsap.to(".element", {
  x: 100, // move right by 100px
  y: 50,  // move down by 50px
  duration: 1.5
});

Timeline: Chaining Animations Like a Pro
Another powerful feature is gsap.timeline(). It lets you sequence animations, making it easier to coordinate multiple effects.

const tl = gsap.timeline();

tl.to(".title", { y: 0, opacity: 1, duration: 1 })
  .to(".subtitle", { x: 0, opacity: 1, duration: 1 }, "-=0.5")
  .to(".button", { scale: 1, opacity: 1, duration: 0.5 });

Benefits of using Timeline:

• Organize complex animations cleanly.
• Sync different animations together.
• Add delays and overlaps easily.

The Developer Experience

Working with GSAP in a Next.js + Tailwind environment has been incredibly smooth. Here’s why:

• Modular: You can scope your animations easily using refs or class names.
• Component-Friendly: Perfect for React-based frameworks like Next.js.
• Integrates with Tailwind: Use Tailwind to handle layout/styling and GSAP purely for animation logic.

So yes, GSAP elevates your frontend game. Pair it with modern frameworks like Next.js and styling tools like Tailwind, and you’ve got a high-performing, interactive web experience.