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

Question

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

我创建了一个函数 cardAnim returns 卡片时间轴 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. I write more extensively about this subject in my article on animating efficiently.

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

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

How to reverse gsap timeline on mouseleave event?

javascript

gsap