Jump to content
Search Community

ScrollTrigger messes with focus of inputs?

Tonycre8 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hey forum. I've come across a little issue with my work on a mobile view, and I'm not sure how to go about dealing with it.

Basically, I've got my home page animated with gsap, as well as a character that is animated within it's own component. When I try to focus on any of the areas on the contact form, it'll push the page up for the keyboard to have some room, and then it'll reset. You can see the effects in this video I recorded of the page on my phone.

I've tried to make a sandbox replicating the code I have, which I'll link here as well.
https://codesandbox.io/s/react-router-re-render-8btmz

This piece has the same issue, it's just a simplified form of it. I just edited some old code that had scrolltrigger already set up.

Any ways you think I can get rid of this issue in particular?

Thanks

Link to comment
Share on other sites

20 hours ago, akapowl said:

Hey @Tonycre8

 

Someone experienced the same and asked about it just recently.

 

Check out this thread and the suggested solution. Hope that helps you out, too.

 

 

Thanks a tonne for this! Guess I wasn't Google searching hard enough. This seems to fix the issue. Although, it does seem to continue to offset the character, but I'm unsure that there's much I can really do about that, so it's going to have to do. Cheers!

  • Like 1
Link to comment
Share on other sites

Happy to point you in the right direction :) 

 

4 hours ago, Tonycre8 said:

Although, it does seem to continue to offset the character, but I'm unsure that there's much I can really do about that, so it's going to have to do.

 

Well, it's pretty much impossible to say, what that is related to from just a video, but my guess would be that you are making use of vh-related units or have things based on the window's height for your character at some point (at least your sections appear to have a height of 100vh as I see in your codesandbox example)?

 

vh-units are most often the cause of jumps when e.g. swiping on mobile and the browser's bars appear/disappear- because it resizes the window to a different size. In your case when the keyboard appears, the same happens - the window gets resized. And if you have things based on the window's height somewhere, it's likely, that things will just shift in relation to that. I'm not sure if there's much you could do about that in that case.

 

  • Like 1
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.
×
×
  • Create New...