Jump to content
Search Community

ScrollTrigger + scrubbed timeline = jumping item

matruck test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts



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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...