CSS & Animations

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

Learn how to create a visually rich, scroll-animated website using GSAP and ScrollTrigger. This step-by-step guide will help you master modern web animations, parallax effects, and responsive interactivity.

James Carter
Author
Jul 7, 2025
Published
5 min
Read time
🧠 Animate Like a Pro: Build a Modern Scroll-Triggered Website with GSAP
🧠 Animate Like a Pro: Build a Modern Scroll-Triggered Website with GSAP

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.


πŸ›  1. 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>

🎞 2. 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.


🧭 3. 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.


πŸŒ„ 4. 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.


🧩 5. 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.


πŸ“± 6. 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.


🧼 7. 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 shows how you can turn simple markup into a high-end, animated web experience using GSAP. Whether you're enhancing a portfolio, creating a product landing page, or experimenting with scroll storytelling—GSAP + ScrollTrigger gives you the control and fluidity needed to stand out.

Share this article

Help others discover this content by sharing it on your favorite platforms.

Stay Updated

Never Miss an Update

Subscribe to our newsletter and get the latest articles, tutorials, and product updates delivered straight to your inbox.

No spam, unsubscribe at any time.