javascript - GSAP rotation animation stops after reversing direction on hover - Stack Overflow

admin管理员组

文章数量:1123506

I am trying to create a continuous rotating text animation using GSAP. The animation should rotate the text 360 degrees continuously. When the mouse hovers over the element, I want to reverse the direction of the animation. However, when the mouse leaves, the animation resumes in the correct direction but it stops instead of continuing the loop.

Here is the CodePen I created to demonstrate the issue: ()

What I want to achieve:

The text should rotate continuously in one direction. When hovering over the element, the rotation direction should reverse. When the mouse leaves, the rotation should continue in the normal direction without stopping.

The problem:

The animation correctly reverses direction on hover, but it stops and does not continue looping in the reverse direction.

My code:

// GSAP timeline
let tlRotatingText;

function rotatingTextAnimation() {
    // Add class 'display'
    $('.circle').addClass('display');
    
    // Check if the timeline already exists
    if (tlRotatingText) {
        return; // Do nothing if it already exists
    }

    // Create a GSAP animation with `repeat: -1` for infinite loop
    tlRotatingText = gsap.to(".circle .text", {
        rotation: 360, // Full rotation
        duration: 5,  // Duration for 360°
        ease: "none",  // No easing for smooth movement
        repeat: -1,    // Repeat infinitely
        modifiers: {
            rotation: (value) => value % 360 // Keep the rotation between 0 and 360 degrees
        }
    });

    // Remove previous events to avoid duplicates
    $(".circle").off("mouseenter mouseleave");

    // Add events to reverse the direction on hover
    $(".circle").on("mouseenter", function () {
        if (tlRotatingText) {
            console.log('Reversing direction');
            tlRotatingText.timeScale(-1); // Reverse the direction
        }
    });

    $(".circle").on("mouseleave", function () {
        if (tlRotatingText) {
            console.log('Resuming normal direction');
            tlRotatingText.timeScale(1); // Resume normal direction
        }
    });
}

What I have tried:

I've used timeScale(-1) to reverse the animation direction when the mouse enters the element. I attempted to use timeScale(1) to return to the normal direction when the mouse leaves. I've used the reverse(0) function

本文标签： javascriptGSAP rotation animation stops after reversing direction on hoverStack Overflow