Introduction
👋 Hello Developers!
Welcome to Day 7 of my GSAP Journey, where I explore the infinite possibilities of animations on the web. Today, I took on the challenge of creating an interactive scroll-based marquee animation featuring dynamic text and rotating arrows.
With GSAP's powerful animation tools, we’ll make the page respond to user scroll direction—up or down—with seamless movement and rotation. Let’s dive in!
What We’re Building 🛠️
Our animation will include:
- A scrolling marquee of text and images.
- Responsive animations that adjust based on the scroll direction.
- Rotating arrows to add flair!
You can view the live demo here.
HTML Structure
Here’s the simple HTML markup I used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day-7 Scrolling Text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page1"></div>
<div id="page2">
<div id="move">
<div class="marque">
<h1>Ashish Prajapati</h1>
<img src="https://www.brandium.nl/wp-content/uploads/2023/07/arrow-br.svg" alt="arrow">
</div>
<div class="marque">
<h1>Ashish Prajapati</h1>
<img src="https://www.brandium.nl/wp-content/uploads/2023/07/arrow-br.svg" alt="arrow">
</div>
</div>
</div>
<div id="page3"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="script.js"></script>
</html>
JavaScript Animation with GSAP
Here’s the GSAP-powered JavaScript code that makes the magic happen:
window.addEventListener("wheel", function (dets) {
if (dets.deltaY > 0) {
// Scrolling Down
gsap.to(".marque", {
x: "-200%",
duration: 4,
repeat: -1,
ease: "none",
});
gsap.to(".marque img", {
rotate: 180
});
} else {
// Scrolling Up
gsap.to(".marque", {
x: "0%",
duration: 4,
repeat: -1,
ease: "none",
});
gsap.to(".marque img", {
rotate: 0
});
}
});
How It Works ⚙️
-
Event Listener: The
window.addEventListener("wheel")detects the scroll direction. -
GSAP Animations:
-
gsap.to()moves the marquee in a specific direction. - The rotation of arrows adds a dynamic, interactive feel.
-
-
Infinite Scrolling: Using
repeat: -1ensures the marquee keeps looping endlessly.
Challenges & Learnings
💡 Challenge: Synchronizing the scroll direction with marquee movement was tricky.
🎯 Solution: GSAP’s robust API made it easy to fine-tune the animations with properties like repeat, ease, and duration.
Final Thoughts
This project showed how GSAP can handle scroll-based interactions and bring webpages to life. Whether you’re working on a personal portfolio or a creative website, GSAP is the perfect tool to make animations engaging and intuitive.
🚀 Try it yourself and share your creations!
Top comments (0)