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 } }); <!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> * { 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; } 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!