DEV Community: Unnati Srivastava

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

Unnati Srivastava — Sun, 08 Jun 2025 20:09:40 +0000

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.

Why Your React App is Slow (And How to Fix It Like a Pro)

Unnati Srivastava — Sun, 25 May 2025 19:17:27 +0000

Let’s face it — React is fast... until it’s not. You’ve probably been there: you build a sleek UI, everything works great in dev, but once your app grows or hits production, it starts to lag. Clicks feel sluggish, page loads are slow, and animations stutter. The worst part is that You’re not even sure where it’s going wrong.

**Problem #1: Unnecessary Re-renders Are Sneaky

**One of the most common reasons React apps become sluggish is because components re-render more often than they need to. React re-renders a component whenever its props or state change — but not all changes are meaningful.

Let’s say you’re passing props like this:

<MyComponent someProp={Math.random()} />
Every time the parent re-renders, someProp changes (because Math.random() returns a new value), and that causes MyComponent to re-render — even if nothing user-facing changed.

Fix it:
Use React.memo to memoize your components. This tells React, “only re-render this component if the props actually change.”

const MyComponent = React.memo(({ someProp }) => { return <div>{someProp}</div>; });
This simple change can dramatically reduce unnecessary work in large component trees.

Problem #2: Poor List Rendering

Rendering long lists using .map() is fine for small datasets — but once you start dealing with hundreds or thousands of items, it becomes a performance bottleneck.

{items.map(item => <Item key={item.id} data={item} />)}

This approach forces React to render every item, even those that aren’t visible on the screen. That’s a lot of wasted effort.

Fix it:
Use windowing libraries like react-window or react-virtualized to render only the items that are currently in view. Here's an example:

`import { FixedSizeList as List } from 'react-window';

{({ index, style }) => (

)}
`

Your UI stays buttery smooth, no matter how large your list gets.

**Problem #3: You're Loading Too Much JavaScript Upfront

This one’s easy to overlook: if your app loads everything at once — every component, every image, every dependency — the initial load time can become painfully slow.

_**Fix it:
Split your code using React.lazy() and Suspense. You only load what you need, when you need it.

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<div>Loading...</div>}> <HeavyComponent /> </Suspense> /
Problem #4: Misusing useEffect

Ever faced infinite re-renders or unnecessary network calls? That’s usually a sign that your useEffect dependencies aren’t correctly set.

Fix It:
Understand how dependency arrays work. Avoid writing effects that depend on values being updated inside the effect itself. Use useRef when you need a value that persists but doesn’t trigger re-renders.

** Problem #5 : You're Not Profiling

You can’t fix what you don’t measure. If you’re not using React’s built-in Profiler, you’re flying blind.

**_Fix it:
Install React Developer Tools and use the Profiler tab. You’ll see exactly which components are re-rendering and how long they take.

Even better: combine this with console logs or performance.mark() calls to really dig into bottlenecks.

Some PRO tips :

Wrap callback functions in useCallback to avoid unnecessary prop changes.
Avoid anonymous functions inside JSX where possible.
Keep your component hierarchy flat and logical.
Use StrictMode in development to catch unexpected behavior early.

A truly great React developer doesn’t just build apps that work. They build apps that feel fast, even under pressure.