Jump issue after playing animation- Chrome Android

[Michu_]

hi, 

I have a big problem after updating the gsap library from 3.6.1 to current version.

In the first case (version 3.6.1) everything work fine, but in the current version is a problem with scroll after firing animation, only the first animation works correctly but the next animations after firing it moves scroll to top (it is big jump ~100vh). On iOS mobile devices, the first and second solution working well and this problem not happend.

I prepared two codesandbox, the first is with version 3.6.1 (next 11) and the second with the current version (gsap: 3.11.4, next: 13). I tried update next in my project but problem is the same and next version is not important in this case. If someone want to test it please test on mobile, because in devtools everything is ok.

Codesandbox gsap 3.6.1: https://codesandbox.io/s/gsap-3-6-1-47r3qv

Live: https://47r3qv.sse.codesandbox.io/

Codesandbox gsap 3.11.4: https://codesandbox.io/s/gsap-3-11-4-6fn5m0

Live: https://6fn5m0.sse.codesandbox.io/

 

[GreenSock]

I don't have a lot of time right now to dig into it, but it looks like you're not doing proper cleanup and possibly creating multiple conflicting animations/ScrollTriggers - gsap.context() is your new best friend in React/Next. Does it fix the problem if you just wrap your code in a gsap.context() and do proper cleanup?: 

https://codesandbox.io/s/gsap-3-11-4-forked-b3sv2w?file=/components/box-element.jsx

 

Please read this article: 

 

 

[Michu_]

thanks for your answer, but in your proposal the problem still exists. The first is ok, but the rest jumps when started.

[GreenSock]

@Michu_ can you please elaborate? I don't see any problems at all. No jumping on anything, but are you saying it only happens on iOS? If so, keep in mind that when you scroll on iOS, the address bar shows/hides which resizes the viewport which triggers a ScrollTrigger.refresh() to adjust all the start/end values (which of course could cause a jump based on all those adjustments that must be made. If you want to skip that, you can do ScrollTrigger.config({ ignoreMobileResize: true }) but the tradeoff is that your start/end values won't be adjusted for the new viewport size. 

 

If you're still having trouble, please be very clear about the steps to reproduce. For example, provide:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo that very clearly illustrates the problem