Reputation: 11
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: (https://codepen.io/developpeur-the-animator/pen/pvzLvJX)
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
Upvotes: 0
Views: 35
Reputation: 1
GSAP animation is not really stopped but just reversed to the start. To the start when it is not yet started to animate itself. To the beginning when the animation wasn't moving yet.
You make call gsap.to
and it starts, but then when you wanted it to reverse its direction, the animation just reversed itself.
To solve your problem you could create two separate tweens,
one in the clockwise direction, and it will start immediately.
And the second tween would have reversed direction but paused at the start with an option paused: true
Then when the mouse enter, you would need to switch them by pausing the first and starting to play the second.
And when it's time to revert back to the previous behavior, you pause the second and start the first again.
Like that:
function rotatingTextAnimation() {
$(".circle").addClass("display");
let clockwiseDirection = gsap.to(".circle .text", {
rotation: 360,
duration: 5,
ease: "none",
repeat: -1,
});
let counterClockwiseDirection = gsap.to(".circle .text", {
rotation: -360,
duration: 5,
ease: "none",
repeat: -1,
paused: true,
});
$(".circle").on("mouseenter", function () {
clockwiseDirection.pause();
counterClockwiseDirection.play();
});
$(".circle").on("mouseleave", function () {
counterClockwiseDirection.pause();
clockwiseDirection.play();
});
}
Upvotes: 0