Как отменить временную шкалу gsap при событии mouseleave?

Question

Я пытаюсь создать анимацию наведения карты с помощью GSAP.

Я создал функцию cardAnim, которая возвращает временную шкалу карты cardAnimTl. При вводе курсора мыши воспроизводится шкала времени cardAnimTl.play(). Я хочу перевернуть временную шкалу при отпускании мыши. Я пробовал cardAnimTl.reverse(), но он не работает.

Вот ссылка на код на 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());
});

Демо . Я более подробно пишу на эту тему в своей статье об эффективной анимации .

К вашему сведению: у вас больше шансов получить более быстрый ответ на форумах GreenSock .