Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
1 reply
naman

Animating multiple elements using gsap

Hey all!
I am trying to animate the rotation of an element based on the scroll direction using gsap. While it works, it only works for the first element, and not the other instances. What are some changes I can make to fix it? Thank you in advance!

  const logo = document.querySelector("#union svg");

const t = gsap.to(logo, {
  rotation: -360,
  duration: 5,
  ease: "none",
  repeat: -1
});
t.iteration(1000);

const speedFactor = 1;
let tl;

var rotate = gsap.timeline({
  scrollTrigger: {
    trigger: "html",
    start: "top top",
    end: "+=10000",
    onUpdate: (self) => {
      tl && tl.kill();
      tl = gsap
        .timeline()
        .to(t, { timeScale: speedFactor * self.direction, duration: 0.1 })
        .to(t, { timeScale: self.direction, duration: 1 }, "+=0.5");
    }
  }
});
Was this page helpful?