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!
Top comments (0)