Problem with animation and keyboard on mobile device

[TheVesta]

Hello! I had a new problem. I use GSAP and ScrollTriger. On mobile devices when I click on Input, the keyboard appears, because of this restart the animation. Animation is also restarted after the keyboard disappears. Is it possible to overcome?

I really hope for your help.

See the Pen BapLEqJ by victor_trunov_ (@victor_trunov_) on CodePen.

[Shaun Gorneau]

I don't see this issue in iOS Safari ... in which device/browser are you seeing the issue?

[Rodrigo]

Hi,

 

You could try disabling the ScrollTrigger instance on the focus event and enabling it back on he blur event.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event

 

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

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

 

Happy Tweening!!!

[TheVesta]

42 minutes ago, Shaun Gorneau said:

I don't see this issue in iOS Safari ... in which device/browser are you seeing the issue?

Android Google Browser. The problem is that the keyboard appears at the bottom of the screen and shifts up the area with the content. As a result of the shift, the animation is re-triggered. When the keyboard disappears, the animation restart again.