1 reply

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

KP-C

Kevin Powell - Community•3y ago•

1 reply

naman

Animating multiple elements using gsap

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

Animating multiple elements using gsap

Similar Threads

Animating multiple elements using gsap

Similar Threads

Similar Threads

Similar Threads