Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TheVesta

Problem with animation and keyboard on mobile device

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!!!

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×