ScrollTrigger causes content to jump when being unpinned

[LUJI]

Hi,

When scrolling throw the container, they are being pinned and stacked on top of each other, but as soon as they are unpinned, the containers are transformed/moved out of place. The codepen showcases the issue I am facing.

Thanks!

See the Pen JoGqOOB by Lu-Juan-Wessels (@Lu-Juan-Wessels) on CodePen.

[mvaneijgen]

Hi @LUJI welcome to the forum!

 

The best thing to do when working 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. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

This demo from the collection gets you already 90% there and check out how little code it is. Be sure to read the post to see what the logic behind it is

See the Pen VYZBQpM by mvaneijgen (@mvaneijgen) on CodePen.

 

That demo in combination with this one, would probably get you the rest of the way 

See the Pen MWxgQbV by mvaneijgen (@mvaneijgen) on CodePen.

 

Hope it helps and happy tweening! 

 

  
 

[LUJI]

Hi,

Thanks so much. It now works perfectly on desktop. But when I scroll in mobile view the animation does not execute. Why would that be?

I updated the codepen with the latest code I am currently using.
 

[mvaneijgen]

Hey looks good! For me it works totally fine on an iPhone 12 Pro Max on iOS 26.1, might be that Codepen doesn't work on mobile, because it is loaded in an iframe, but if you open the /debug/ view it loads like a normal sites.

 

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

This jump can happen because of the particular scroll speed and pinning. This is related to the fact that in mobile devices the synchronization between the scrolling thread and the JS thread (the thread in the browser that executes the JS code) can be really slow sometimes, so it takes a few extra milliseconds to sync the code with the scroll position, sometimes enough to be noticeable by the human eye. This is not related to GSAP, just the nature of things when dealing with devices I'm afraid. You can try using normalizeScroll only on mobiles using ScrollTrigger.isTouch:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch

 

Also keep in mind that the heavier, more complex the rendering update (what actually is rendered in the screen) the longer it will take, so avoid CSS filters, large images, shadows, etc.

 

Hopefully this helps

Happy Tweening!

[LUJI]

Think I justed needed to clear my browser's cache. The animation now also works on mobile!

Thanks for your added comments @Rodrigo

Thanks for all the help.