如何在mouseleave事件上反转gsap时间轴？

Question

我正在尝试使用GSAP制作卡片悬停动画。

我创建了一个函数cardAnim，该函数返回卡片时间轴cardAnimTl。 在mouseenter上播放时间轴cardAnimTl.play()。 我想在mouseleave上反转时间轴。 我尝试了cardAnimTl.reverse()，但没有用。

这里是link to the code on codepen。

它会播放，但不会反转。有什么建议？ 谢谢。

Answer 1

您正在输入和离开事件中调用该函数。这意味着每次这些事件之一发生时，您都在创建并返回动画。

您要做的是创建时间轴一次，然后在该时间轴上使用控制方法。

cards.forEach((card) => {
  const cardCover = card.querySelector(".card__cover");
  const anim = cardAnim(cardCover);
  
  card.addEventListener("mouseenter", () => anim.play());
  card.addEventListener("mouseleave", () => anim.reverse());
});

Demo。我在article on animating efficiently中对此主题进行了更广泛的写作。

仅供参考：在the GreenSock forums上，您更有可能获得更快的答案。