Home >Web Front-end >JS Tutorial >'Day ith GSAP: Interactive Scrolling Animation with Rotating Arrows'

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

Linda HamiltonOriginal: 2024-12-17 12:25:23901browse

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>




<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 ⚙️

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 Documentation
Live Demo
Source Code on GitHub

The above is the detailed content of 'Day ith GSAP: Interactive Scrolling Animation with Rotating Arrows'. For more information, please follow other related articles on the PHP Chinese website!

html include try using Event this animation github

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Accurately Get Real Image Dimensions in WebKit Browsers?Next article：How to Accurately Get Real Image Dimensions in WebKit Browsers?

See more