timelineMax, как развернуть один раз при наведении, не повторяя - PullRequest
Новая
       128

timelineMax, как развернуть один раз при наведении, не повторяя

0 голосов
/ 11 февраля 2020

У меня проблема в том, что когда я вывешиваю, он повторяет анимацию столько раз, сколько раз он играл за таймер, на котором была мышь.

Если я остановлюсь до того, как он завершит свою первую итерацию анимации, то он go вернется в нормальное состояние без проблем. Однако, если я удержу его в течение более 2 секунд, чтобы он завершил как минимум 2 итерации, обратный процесс также повторит его 2 раза, прежде чем он вернется в исходное положение.

По сути, я хочу, чтобы он постоянно плавал при наведении на него, и я хочу, чтобы он go отступал после того, как зависал.

Вот ссылка на мою демонстрацию codepen: https://codepen.io/e1668058/pen/Exjjwdm 

let theMenu = document.getElementById("menu");
const tl = new TimelineMax({paused:true});

tl.to(theMenu, 1, {y:"-20px", yoyo: true, repeat: -1});

function floatingOn() {
  tl.play();
}

function floatingOff() {
  tl.reverse();
}

Есть ли у него способ просто плавно go вернуться в исходное положение?

Заранее спасибо.

...