dev-resources.site

for different kinds of informations.

"Day 7 with GSAP: Interactive Scrolling Animation with Rotating Arrows"

Published at

12/15/2024

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: -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 Article's

30 articles in total

How to improve the Frontend part of the project using one button as an example :))))