Welcome to Day 2 of the GSAP learning series! In this session, we'll dive into the world of ScrollTrigger, a powerful plugin in GSAP that helps create scroll-based animations effortlessly. This day builds upon our foundational knowledge from Day 1, introducing animations that react dynamically to user scroll interactions.
Final Project Link: Day 2 GSAP Project
GitHub Repository: Anticoder03/gsap
🚦 Animating Elements with ScrollTrigger
Below are the examples covered today:
1. Basic Animation
gsap.from("#page1 #box", {
scale: 0, // Shrinks the element to zero size initially
duration: 1, // Animation duration is 1 second
delay: 1, // Starts after a 1-second delay
rotate: 360 // Rotates the element 360 degrees
});
This simple animation makes an element scale up from 0 to its original size while performing a 360° rotation.
2. Scroll-Triggered Box Animation
gsap.from("#page2 #box", {
scale: 0,
opacity: 0,
duration: 1,
rotate: 360,
scrollTrigger: {
trigger: "#page2 #box", // Element that triggers the animation
scroller: "body", // Scroll container
markers: true, // Visual markers for debugging
start: "top 60%", // Animation starts when the top of the element reaches 60% of the viewport
end: "top 30%", // Animation ends at 30% of the viewport
scrub: 5 // Smoothens animation over 5 seconds
}
});
This code uses ScrollTrigger to animate the #box on #page2 as the user scrolls through the page.
3. Heading Animations with ScrollTrigger
For <h1>:
gsap.from("#page2 h1", {
opacity: 0, // Starts completely transparent
duration: 1,
x: 500, // Moves in from the right
scrollTrigger: {
trigger: "#page2 h1",
scroller: "body",
markers: true, // Debugging markers
start: "top 60%", // Begins animation when the heading is 60% into the viewport
}
});
For <h2>:
gsap.from("#page2 h2", {
opacity: 0,
duration: 1,
x: -500, // Moves in from the left
scrollTrigger: {
trigger: "#page2 h2",
scroller: "body",
markers: true,
start: "top 60%",
}
});
These animations create smooth transitions for headings, entering from opposite directions.
4. Pinning and Animating an Element
gsap.from("#page2 #box", {
scale: 0,
opacity: 0,
duration: 1,
rotate: 360,
scrollTrigger: {
trigger: "#page2 #box",
scroller: "body",
markers: true,
start: "top 60%",
end: "top 30%",
scrub: 5,
pin: true // Pins the box during the animation
}
});
Pinning locks an element in place while it animates, creating an engaging effect.
5. Moving Elements Horizontally
gsap.to("#page2 h1", {
transform: "translateX(-300%)", // Moves out of the viewport to the left
scrollTrigger: {
trigger: "#page2",
scroller: "body",
start: "top 0%",
end: "top -100%",
scrub: 5,
pin: "#page2" // Pins the entire page section
}
});
This moves the heading horizontally across the screen, synced with the scroll.
6. Page-Specific Animations
Page 1 Heading:
gsap.from("#page1 h1", {
opacity: 0,
delay: 1,
duration: 1,
scale: 0.2,
yoyo: true // Reverses the animation on repeat
});
Page 3 Heading:
gsap.from("#page3 h1", {
opacity: 0,
color: "#000", // Ensures the text starts in black
delay: 1,
duration: 1,
scale: 0.2,
yoyo: true,
scrollTrigger: {
trigger: "#page3",
scroller: "body",
start: "top 60%",
end: "top 30%",
scrub: 5
}
});
These animations introduce visual flair as users scroll through different sections.
🔍 Key Learnings
-
Using
scrollTrigger:- Attach animations to scrolling.
- Configure start and end points to control animation timing.
-
Pinning and Scrubbing:
- Pinning freezes an element during animation.
- Scrubbing syncs the animation with scroll progress.
-
Debugging with Markers:
- Use
markers: truefor debugging during development.
- Use
📌 Final Notes
Day 2 introduced you to the magic of ScrollTrigger and how GSAP animations can respond dynamically to user scroll actions. Whether it’s pinning, scrubbing, or triggering animations at precise moments, ScrollTrigger is a game-changer for creating immersive web experiences.
Feel free to check out the live demo and code:
- Project Link: Day 2 GSAP Project
- GitHub Repository: Anticoder03/gsap
Stay tuned for Day 3, where we’ll explore even more advanced GSAP features. Happy animating! 🎉
Top comments (0)