Scrub Timing

[fourbier]

I need help understanding the timing of my scrubbed Scrolltrigger. Why is the third image not following the second one?
Where is my mistake? Thank you so much.
Fourbier 

See the Pen empwMRw by Georges-F-the-scripter (@Georges-F-the-scripter) on CodePen.

[fourbier]

I can solve the problem by setting ease: linear. Weird.

 

See the Pen XJmLYpY by Georges-F-the-scripter (@Georges-F-the-scripter) on CodePen.

[Rodrigo]

2 hours ago, fourbier said:

I can solve the problem by setting ease: linear. Weird.

Actually it makes perfect sense. By default all GSAP Tweens have a power1.out easing function applied to them:

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

 

That means the animation starts a bit faster and end slower, so when the animation is at 50% of it's duration in seconds, the actual progress is not 50%

 

I forked your demo and removed the ScrollTrigger part of it and added GSDevTools so you can scrub back and forth and see it for yourself, all you have to do is uncomment the ease in the defaults object:

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

 

Finally if you want to apply the same setting to all the instances in your Timeline you can use the defaults config option:

https://gsap.com/docs/v3/GSAP/Timeline#setting-defaults

 

Also is worth noticing that the default duration of a GSAP Tween is 0.5 seconds, so this is not really needed:

tl.fromTo(
  img_wusch[0],
  { x: 0 },
  { x: -halfWidth, duration: 0.5, },
  "0"
)

Hopefully this clear things up

Happy Tweening!

[fourbier]

Thank you, Rodrigo! I really love GSAP and ScrollTrigger and all those things. Sometimes, though, I just wish the docs were a bit easier to browse.... 
(I may be  a bit old fashioned : )

[Rodrigo]

11 hours ago, fourbier said:

Sometimes, though, I just wish the docs were a bit easier to browse.... 

Sorry to hear this 😞

 

Anything in particular that is making going and finding information in the docs difficult for you? We thrive in making learning GSAP and finding relevant information as simple as possible. We aim to make the life of our users easier not the other way around, so they can focus on creating amazing stuff.

[fourbier]

I really don’t mean this as a complaint. It may be simply due to the complexity of the library that it's sometimes hard to find the proper definition, if you don't use it regularly... (where is the "vars-object"? do I need quotes or not? is it "+1000" or "+=1000"... : )

[Rodrigo]

1 minute ago, fourbier said:

where is the "vars-object"?

https://gsap.com/docs/v3/GSAP/Tween/vars

 

2 minutes ago, fourbier said:

do I need quotes or not? is it "+1000" or "+=1000".

Have a look at the position parameter:

https://gsap.com/resources/position-parameter

 

Needless to say that if you have any question, just post here in the forums and we'll get back to you 👍

 

Happy Tweening!