Анимация вращения GSAP останавливается после изменения направления при наведении курсора мыши ⇐ Javascript

[Anonymous]

Я пытаюсь создать непрерывную вращающуюся текстовую анимацию с помощью GSAP. Анимация должна непрерывно вращать текст на 360 градусов. Когда указатель мыши наводится на элемент, я хочу изменить направление анимации. Однако, когда мышь уходит, анимация возобновляется в правильном направлении, но останавливается вместо продолжения цикла.
Вот CodePen, который я создал, чтобы продемонстрировать проблему:
( https://codepen.io/developpeur-the-animator/pen/pvzLvJX)
Чего я хочу достичь:
Текст должен непрерывно вращаться в одном направлении.
При наведении курсора на элемент направление вращения должно измениться.
Когда мышь уходит, вращение должно продолжаться в нормальном направлении без остановки.
Проблема :
Анимация правильно меняет направление при наведении курсора, но останавливается и не продолжает циклически двигаться в обратном направлении.
Мой код:

Код: Выделить всё

// 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
}
});
}

Что я пробовал:
Я использовал timeScale(-1), чтобы изменить направление анимации, когда мышь входит в элемент.
Я попытался использовать timeScale(1), чтобы вернуться в нормальное направление, когда мышь уходит.
Я использовал функциюverse(0)

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-on-hover