DEV Community

Sarthak Mittal
Sarthak Mittal

Posted on

Big Text Animation on Scroll

Today, I embarked on an exciting journey with GSAP (GreenSock Animation Platform) and its powerful ScrollTrigger plugin. Here's a quick rundown of what I learned and how I brought my ideas to life.

Basics of GSAP

GSAP is a robust JavaScript library for creating high-performance animations. I started by animating simple elements, which was surprisingly easy and effective.

Discovering ScrollTrigger

ScrollTrigger, a GSAP plugin, allows you to animate elements based on scroll position. Here are some key properties:

  • trigger: Select the element to animate.
  • scroller: Usually set to "body".
  • start: Define when the animation starts.
  • end: Define when the animation ends.
  • markers: Visualize start and end points (useful for debugging).
  • scrub: Smoothly control animation with scroll (can be a Boolean or a number between 1-5).
  • pin: Pin the element during the animation.

My Big Text Animation

I created an engaging big text animation that moves as you scroll down the page. Here’s the code and a brief explanation:

gsap.to(".page2 h1", {
    transform: "translateX(-250%)",
    scrollTrigger: {
        trigger: ".page2",
        scroller: "body",
        start: "top 0%",
        end: "top -100%",
        scrub: 2,
        pin: true
    }
});
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Big Scroll Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page1">
        <h1>Welcome to Big Scroll Text Animation</h1>
    </div>
    <div class="page2">
        <h1>BIG SCROLL ANIMATION</h1>
    </div>
    <div class="page3"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
html, body {
    height: 100vh;
    width: 100vw;
}
body {
    overflow-x: hidden;
}
.page1, .page3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
.page1 { background-color: black; }
.page1 h1 { color: white; }
.page2 {
    background-color: cornsilk;
    height: 100%;
    align-items: center;
}
.page2 h1 {
    color: black;
    font-size: 70vh;
    font-weight: 400;
}
.page3 { background-color: black; }

Enter fullscreen mode Exit fullscreen mode

You can see this animation in action here on CodePen.

Today was a fantastic learning experience, and I'm excited to continue exploring the capabilities of GSAP and ScrollTrigger. Stay tuned for more animations!

Top comments (0)