Wrong timing with Timeline and ScrollTrigger

[Philippe-Gllrt]

Hello GSAP people,

 

I already know the answer is probably easier than I think, but I can’t seem to figure it out.

Here’s a small demo:

I'm trying to set up horizontal scrolling of the "train" inside the frame. The problem is that when I reach the middle of the scroll, I expect to see only the purple square—meaning that the train has translated by 33.333%, which is half the translation I want. However, instead of seeing only the purple square, I end up further into the timeline, seeing half of the purple square and half of the pink one.

 

I’ve tried adjusting the scrub to a number and changing the easing values, but nothing seems to solve the issue.

 

Thanks in advance for any help you can provide!

See the Pen PoMwPoX by PhilippeGoulliart (@PhilippeGoulliart) on CodePen.

[Rodrigo]

Hi,

 

You're right super easy and simple solution 😉

 

By default all GSAP instances have a power1.out easing function applied to them, that means they start a bit fast and end a bit slow:

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

 

You have to give your tween a linear easing function:

Tl.to(".train", {
  xPercent: -66.6667,
  ease: "none"
});

Here is a fork of your demo:

See the Pen oNKgjbE by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Philippe-Gllrt]

Thanks a lot for this Rodrigo. If I may borrow a bit more of your time, I struggle understanding how the easing of the timeline and the easing of the tween interfers. Was I wrong apllying any easing on the timeline directly ?

[mvaneijgen]

33 minutes ago, Philippe-Gllrt said:

Was I wrong apllying any easing on the timeline directly ?

Currently you don't have an easing on the timeline, you have an easing in the ScrollTrigger, see below a snippet of your code. The thing is there is no ease property in ScrollTrigger, if you check the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1 you'll only find one ease property, but that it self is part of the snap property, so ScrollTrigger doesn't know what to do with that so it ignores it. 

 

  scrollTrigger: {
    ease: "none", 
  }

 

Next up had you had it written like this, it would also have done nothing, because the timeline also doesn't have a ease property, however the defaults object inside the timeline does have an ease property. I can understand why that might be confusing, but if you work with it for a while you figure out that it is all really logical and fairly cleverly thought out.  

 

// ❌

let Tl = gsap.timeline({
  ease: "none", 
});

// ✅

let Tl = gsap.timeline({
  defaults: {
    ease: "none", 
  }
});

Hope it helps and happy tweening!