我想在 GSAP 时间线中反转 animation

Question

I'm working on GSAP and I wanted to reverse the animation. I used the following approach, but it didn't work. Is there any syntactical error?

  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

You have an invalid tween. You should either pass in one vars parameter and use .to() or use two vars parameters and use .fromTo() .

To get it to repeat, just use the repeat and yoyo attributes!

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

I highly recommend the GSAP Getting Started article .