ScrollTrigger + scrubbed timeline = jumping item

[matruck]

Hello,

 

First of all,  thanks a lot to the gsap team for all the work and support you provide everyday, it's amazing and really bring the product to another level

 

 

I have an horizontal scroll with sections and scrubbed timelines on every section.

Each timeline moves a cube.

My issue is that the cube "jumps" the first time scrolling over the third section. I want it to have its shifted position since the begining before the first scroll pass. How can I do this ?

 

Thank you !

 

 

 

 

 

 

See the Pen QWVBejZ by NinjaKinshasa (@NinjaKinshasa) on CodePen

[mvaneijgen]

The .fromTo() tween are great, but you will rarely need it. If you know where your element is and where you want it to you can just use .to() and .from() and because these are just simpler in nature they will behave them selfs better. It is not to say that .fromTo() is bad, but you have to know what you are doing to prevent these kinds of bugs. 

 

Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Hope it helps and happy tweening! 

 

See the Pen xxaadrp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen