GSAP Scroll Sequence Speed ramping animation sequence?

[Alexo]

Hi all,

 

I have been struggling with this issue for a few days now and cannot figure out why it is occurring. Basically what is happening is just after my first title sequence is show on the scroller the speed of my animation seems to ramp up, creating a really aggressive turn around my animated cart?

 

I have tried the following:

- Stripping back script to the basics of a scroller with a loop (no titles etc)

- Removing all irrelevant styling and html markup

- Using existing scroll sequence scripts to see if its an issue

 

And yes the animation is correct, smooth like butter. Have used the image sequence in AE and Premiere etc and no issues with the speed

 

Could someone point me in the right direction or spare a brain cell or two so I can get past this hicup?

 

Cheers

 

*Just to note best to edit on codepen as its not responsive as such, for the full current website its available on my dev here > https://dev.lugecartworld.com/

See the Pen dygXyxW?editors=1011 by alexrankin98 (@alexrankin98) on CodePen

[Rodrigo]

Hi @Alexo and welcome to the  GreenSock forums!

 

I fiddled around with your codepen for a bit and the only solution I can think of is changing the easing function of the frames instance in your timeline:

let scrollAnimation = gsap.timeline({
  scrollTrigger: {
    scrub: 0.5,
    trigger: ".gsap-wrapper", // Trigger Scroll animation
    start: "top top",
    pin: "#hero-cart", // What element we are pinning
    markers: true,
    id: "frames",
  }
});

scrollAnimation.to(position, {
  frame: scrollableFrames - 1,
  snap: "frame",
  duration: 1, // <= affects ratio
  ease: "none",
  onUpdate() {
    if (isLooping) {
      loop.paused() && positionTo(position.frame);
    } else {
      render();
    }
  }
});

Right now you have circ.inOut which at some point (seems to be that particular part of the sequence) is going to speed up quite a bit. Check the ease visualizer in order to see how that works:

https://greensock.com/docs/v3/Eases

 

Setting the ease to none, means that the frame number will be tweened at the same ratio throughout the entire animation, ensuring a constant change ratio. Any other easing function you use, will speed up some part and slow down another which could lead to similar issues.

 

Hopefully this helps.

Happy Tweening!

[Alexo]

Thanks, Rodrigo! Can't believe I didn't see that, life saver cheers!