Animate Like a Pro: Build a Modern Scroll-Triggered Website with GSAP

Mon, 30 Jun 2025 06:17:22 +0000

Introduction

Modern websites aren’t just static layouts—they breathe, respond, and tell stories. In this guide, we’ll walk through how to build a modern, scroll-triggered, animation-rich website using GSAP (GreenSock Animation Platform).

Inspired by top-tier Awwwards websites, this post teaches you how to:

Animate text on page load

Trigger elements on scroll

Create parallax effects

Add interactive hover animations

Optimize for performance and responsiveness

All with clean code and professional structure.

Setting Up Your Project

Create your basic folder structure:

project/
├── index.html
├── styles.css
└── script.js

index.html

<section class="hero">
  <h1 class="headline">We Design for Impact</h1>
  <button class="cta">Discover More</button>
</section>

styles.css

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #121212;
  color: #fff;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Include GSAP via CDN in your HTML:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

Animate Hero Section with GSAP Timeline

Let’s animate the headline and button on page load using gsap.timeline():

const tl = gsap.timeline();

tl.from(".headline", {
  y: 100,
  opacity: 0,
  duration: 1.2,
  ease: "power4.out"
})
.from(".cta", {
  y: 20,
  opacity: 0,
  duration: 1,
  ease: "back.out(1.7)"
}, "-=0.5");

Result: Smooth fade-in entrance animation with professional timing and bounce.

ScrollTrigger Section Animations

Create reusable section reveals using ScrollTrigger:

<section class="section">About</section>
<section class="section">Projects</section>
<section class="section">Contact</section>

gsap.utils.toArray(".section").forEach(section => {
  gsap.from(section, {
    scrollTrigger: {
      trigger: section,
      start: "top 85%",
      toggleActions: "play none none reverse"
    },
    y: 100,
    opacity: 0,
    duration: 1
  });
});

Result: Each section fades and slides in when scrolled into view.

Create a Parallax Effect

Use a parallax background for depth:

<div class="parallax-wrapper">
  <img src="bg.jpg" class="bg-image" />
</div>

.parallax-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.bg-image {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: -1;
}

gsap.to(".bg-image", {
  scrollTrigger: {
    trigger: ".parallax-wrapper",
    scrub: true,
  },
  y: "-30%",
  ease: "none"
});

Result: Smooth scroll-linked background motion—eye-catching and modern.

Add Hover Animation to Elements

Create hover-based animations for interactive elements:

<div class="card">Hover me</div>

.card {
  width: 200px;
  height: 200px;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

document.querySelectorAll(".card").forEach(card => {
  card.addEventListener("mouseenter", () => {
    gsap.to(card, { scale: 1.05, duration: 0.3 });
  });
  card.addEventListener("mouseleave", () => {
    gsap.to(card, { scale: 1, duration: 0.3 });
  });
});

Result: Subtle interactivity that improves UX without overwhelming.

Responsive & Mobile Optimization

Use ScrollTrigger.matchMedia() to conditionally control animations based on screen size:

ScrollTrigger.matchMedia({
  "(min-width: 768px)": function() {
    gsap.from(".cta", {
      y: 50,
      opacity: 0,
      duration: 1,
      scrollTrigger: {
        trigger: ".cta",
        start: "top 80%"
      }
    });
  }
});

Pro Tip: Disable or simplify animations for low-powered mobile devices.

Final Touches & Best Practices

Use performance-friendly easing like "power2.out" or "none" for scroll-linked effects

Use will-change CSS property for elements that animate

Avoid layout jank: Animate transform, not top/left

Bonus: What Makes It Awwwards-Worthy?

Consistent motion rhythm

Smooth easing and microinteractions

Strategic use of white space and bold type

Layered visual depth (z-index, parallax, lighting)

✅ Conclusion

This step-by-step journey demonstrates how to transform basic markup into a sophisticated, animated web experience using GSAP. Whether you're enhancing a portfolio, creating a product landing page, or experimenting with scroll-based storytelling, GSAP and ScrollTrigger give you the control and fluidity needed to stand out.

Coder Legion - Recent posts tagged gsap

Animate Like a Pro: Build a Modern Scroll-Triggered Website with GSAP