How sped up existing gsap animation on scroll using scrolltrigger

[iamruletik]

Hello again
I have another one (maybe) dumb question, but I  can't figure out how to sped up my existing gsap animation using scrolltrigger.  I have emblem looping indefinetly around itself with one speed. And I want this emblem to go faster when I scroll down or up. Kind of giving it a push when scrolling. Is it possible?


P.S: I have a sprite animation and I noticed that at the end of loop there one empty frame on each repeat. Why is that? I set up exactly 50 steps in script and I have exactly 50 sprites in my image.

See the Pen oNQZqvO by iamruletik (@iamruletik) on CodePen

[Rodrigo]

Hi,

 

Sure thing, just update the loop's timeScale property and then tween it back to 1:

const emblemLoop = gsap.to(".emblem--sprite", 1, {
  repeat: -1,
  x: -6750,
  ease: "steps(50)"
});

gsap.to(".emblem--container", {
  scrollTrigger: {
    trigger: ".emblem--container",
    start: "top top",
    end: "+=6750",
    markers: true,
    //pin: true,
    scrub: 0.8,
    onUpdate: () => {
      emblemLoop.timeScale(3);
      gsap.to(emblemLoop, { timeScale: 1, ease: "power2.in", duration: 1 });
    }
  },
  scale: 0.5,
  x: 100,
  y: 100,
  ease: "power2.out"
});

https://greensock.com/docs/v3/GSAP/Tween/timeScale()

 

Keep in mind that GSAP can tween any numeric value on any object you feed it and  GSAP Tweens/Timelines are objects so you can tween the timeScale of them.

 

Here is a fork of your codepen:

See the Pen rNQyrVK by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[iamruletik]

@Rodrigo thank you very much for the help)