我想在GSAP时间轴中反转动画

Question

我正在制作GSAP，我想反转动画。我使用了以下方法，但是没有用。有语法错误吗？

  const svg1 = document.querySelector(".svg1"); 
  window.addEventListener("DOMContentLoaded", () => {
  const tl1 = gsap.timeline({
    onComplete: reverse(),
  });
  const tl2 = gsap.timeline();
  tl1.from(
    svg1,
    { rotate: "0deg,", scale: 1 },
    { rotate: "30deg", scale: 0.8, duration: 2 }
  );
  function reverse() {
    tl2.from(
      svg1,
      { rotate: "30deg,", scale: 0.8 },
      { rotate: "0deg", scale: 1, duration: 2 }
    );
    tl1.play();
  }
});

Answer 1

您的补间无效。您应该传入一个vars参数并使用.to()或使用两个vars参数并使用.fromTo()。

要使其重复，只需使用repeat和yoyo属性！

const tl1 = gsap.timeline({ repeat: 1, yoyo: true });
tl1.from(".svg1", { rotate: 30, scale: 0.8, duration: 2 });

我强烈推荐GSAP Getting Started article。