'Day ith GSAP: Interactive Scrolling Animation with Rotating Arrows'

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:

    <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">


    <div>




<hr>


<hr>

<h3>
  
  
  JavaScript Animation with GSAP
</h3>

<p>Here’s the GSAP-powered JavaScript code that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">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 ⚙️

1. Event Listener: The window.addEventListener("wheel") detects the scroll direction.
2. GSAP Animations:
   • gsap.to() moves the marquee in a specific direction.
   • The rotation of arrows adds a dynamic, interactive feel.
3. Infinite Scrolling: Using repeat: -1 ensures 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!

---

Resources

• GSAP Documentation
• Live Demo
• Source Code on GitHub

---