Changing the device's orientation changes gsap animation

[Pablitooten]

Hi! 

 I have a general problem in my page when using a mobile phone, when I change from horizontal view to vertical view or viceversa, some effects apply incorrectly so i have to refresh the page to make them apply correctly.

You can check what I say just executing my page nogunsdrugsbets.com in any mobile device. In example, all is going smoothly, paragraphs have an animation to make them go up when they are reaching the top of the screen, but when I change the orientation, the paragraphs just go too soon up, changing the whole animation, so i have to refresh the page to make them work right back, but if i change the orientation back, again the paragraphs go to soon and i have to refresh again the page... and so on.

 

My question is simple, is there a way to avoid this or any code in gsap make it "refresh" automatically. A user who enters to my page will think is a problem with the coding of the page and probably won't even bother to refresh...

 

I can't pass you a example of this as it always shows and I don't know the cause, but it is annoying if you change the position of the device, something that it is done constantly.

 

Thank you so much.

[OSUblake]

If you're using ScrollTrigger, have you looked at invalidateOnRefresh property?
 

Quote

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

See the Pen 8a2b93488881f6b89f6c82d8b4eac40c by cassie-codes (@cassie-codes) on CodePen

 

 

 

[Pablitooten]

Hi OSUblake, maybe i wasn't using the correct syntaxis but invalidate() method didn't do the trick. 

I got through using ScrollTrigger matchmedia, differentiating between min-width 502 and max-width 501.  Even when using the exact same values in both medias, it seems to do the trick and kind of refresh the animation when changing the orientation of the device.

 

Appreciate your answer.

[Cassie]

I'm afraid I'm struggling to understand this pal.

 

Can you put together a minimal demo for us? Thanks!