Kevin Powell - Community•14mo ago

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");
    }
  }
});

  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");
    }
  }
});

1 Reply

MarkBoots•14mo ago

well, you are only selecting 1 element (logo) If you want to select more, use document.querySelectorAll() (with a class selector) Inside a foreach loop you can add the gsap animation to each one of them (im not really familiar with gsap, so there might be other approaches as well)

Gaming

Programming

Animating multiple elements using gsap