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
MarkBoots14mo 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)
Want results from more Discord servers?
Add your server