Я хотел отменить анимацию на шкале времени GSAP - PullRequest
Новая
       25

Я хотел отменить анимацию на шкале времени GSAP

0 голосов
/ 17 июня 2020

Я работаю над 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();
  }
});

1 Ответ

0 голосов
/ 18 июня 2020

У вас недопустимая анимация движения. Вы должны либо передать один параметр 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" .

...