我想反转 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。

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

I wanted to reverse the animation in GSAP timeline

javascript

css

gsap