The animation lagging when scroll hard and mobile device [ScrollToPlugin & ScrollTrigger]

[Krix]

My case is when the user scrolls the first time, no matter whether short or long, the animation must be finished. And revert the animation when going backward.

But somehow when I scroll hard, the heading is lagging.

You can test it on a mobile device and see the difference.

 

video: https://drive.google.com/file/d/17V6gMXfMVGqWCzZppKC5TwgKmZBSbC_g/view?usp=drivesdk

 

Codesanbox link: https://codesandbox.io/p/sandbox/charming-hill-ss2m8s

 

 

[Rodrigo]

Hi,

 

This seems more related to the way touch devices handle scroll.

 

Try using normalizeScroll and see how it goes:

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

 

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

ScrollTrigger.normalizeScroll(true);

Also you could try a more specific snap configuration in your ScrollTrigger instance (scroll down until the snap section and see the object configuration). Basically you want to snap to an array of values [0, 1] so it goes to the start or end point of the ScrollTrigger instance:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Hopefully this helps.

Happy Tweening!

[Krix]

6 hours ago, Rodrigo said:

Hi,

 

This seems more related to the way touch devices handle scroll.

 

Try using normalizeScroll and see how it goes:

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

 

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

ScrollTrigger.normalizeScroll(true);

Also you could try a more specific snap configuration in your ScrollTrigger instance (scroll down until the snap section and see the object configuration). Basically you want to snap to an array of values [0, 1] so it goes to the start or end point of the ScrollTrigger instance:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Hopefully this helps.

Happy Tweening!

Thanks for your response, I tried the snap with values [0,1] but it has a delay time (even though I set the delay time as 0) and it does not scroll immediately.

[Rodrigo]

Hi,

 

Did  you try normalizeScroll(true)?

[MakeUp]

Hi, try setting will-change: transform on the CSS of your moving elements

[Krix]

18 hours ago, Rodrigo said:

Hi,

 

Did  you try normalizeScroll(true)?

Sorry for my late response, the normalizeScroll reduces lagging animation.

[Krix]

18 hours ago, MakeUp said:

Hi, try setting will-change: transform on the CSS of your moving elements

Do you mean to add that CSS variable to all the elements that have animation?

[Rodrigo]

5 hours ago, Krix said:

Do you mean to add that CSS variable to all the elements that have animation?

At least in the ones that are giving you the most trouble, is worth testing.

 

Happy Tweening!