Jump to content
GreenSock

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

Jumpy Behavior With Input Fields on Mobile Phone

Recommended Posts

There's a strange behavior with GSAP/Scrollmagic with input fields on Mobile Phones (I'm testing on Android): When I scroll down to the form, click on the first input box, the browser jumps down to the bottom of next section.  Works fine on desktop. 

 

See the Pen pozgdWz by ericnguyen23 (@ericnguyen23) on CodePen

Share this post


Link to post
Share on other sites

Hey @ericnguyen23,

 

I'm on Android phone right now and was not able to see any unexpected jumping around. What phone are you using? What browser? I'm on a Nokia running Firefox.

 

Do you have this issue if you open your example pen in 'Debug' mode? It will help us figure out if it's something to do with codePen.

 

Share this post


Link to post
Share on other sites
4 minutes ago, Dipscom said:

Hey @ericnguyen23,

 

I'm on Android phone right now and was not able to see any unexpected jumping around. What phone are you using? What browser? I'm on a Nokia running Firefox.

 

Do you have this issue if you open your example pen in 'Debug' mode? It will help us figure out if it's something to do with codePen.

 

 

I'm on s8 Plus, Chrome browser. 

 

Yes, same issues in debug view. Here's the debug link: https://s.codepen.io/ericnguyen23/debug/pozgdWz/jVApobzEWqZr

Share this post


Link to post
Share on other sites
1 minute ago, ericnguyen23 said:

Similar to what Pedro said, I can't reproduce any weird jumping on my Android. All I see is some built in zooming for the input which, if someone zooms out again, makes them have to scroll to the inputs again. Is this what you're talking about @ericnguyen23? Maybe you could take a screen capture of the effect that you're seeing?

Share this post


Link to post
Share on other sites

The issue will be most likely related to resize event triggered by the opened keyboard. 

 

ScrollMagic tries to recalculate the values to match with new viewport and scroll position. 

 

It won't happen on desktop as there is no keyboard showing over the site. 

 

Anyhow this issue if we can call it that way is related to the ScrollMagic and it is not really scope of this forum. 

 

Try to log out values of scroll position / time-line progress before and after to see how they are affected. 

 

Ps: I can replicate this only on first demo opened in separate window. Last demo does the zoom in as Zach described. 

  • Like 2

Share this post


Link to post
Share on other sites

Oh, look at this, it's a thread party! Whoop whoop whoop!

 

So, I see the zooming in on Chrome and agree that is a jarring experience. It makes me think you have forgotten to add the meta tags for the zooming and scaling of the document. In fact, checking your original link, I don't see any of the metatags.

 

If your are unfamiliar with codePen, press the settings button of your pen, look at the HTML tab and under the Stuff for <head> text area there's a button that says: "insert the most common viewport metatags". Click on that to add some common stuff, save your pen and check to see if that helps.

  • Like 3

Share this post


Link to post
Share on other sites
34 minutes ago, Wipeo said:

ScrollMagic tries to recalculate the values to match with new viewport and scroll position. 

 

 

Yep. Works fine without ScrollMagic.

 

A wise man once said, "You might not need ScrollMagic".

  • Haha 2

Share this post


Link to post
Share on other sites
2 hours ago, Dipscom said:

Oh, look at this, it's a thread party! Whoop whoop whoop!

 

So, I see the zooming in on Chrome and agree that is a jarring experience. It makes me think you have forgotten to add the meta tags for the zooming and scaling of the document. In fact, checking your original link, I don't see any of the metatags.

 

If your are unfamiliar with codePen, press the settings button of your pen, look at the HTML tab and under the Stuff for <head> text area there's a button that says: "insert the most common viewport metatags". Click on that to add some common stuff, save your pen and check to see if that helps.

Thanks, I've added this and the jumpy/jittery behavior is still there.  Let me explain what I'm experiencing:

  1. When I click on the name input box, browser jumps to bottom section.
  2. As I continue to scroll up and down, I also experience jittery animations. This again, likely due to Scrollmagic, so I'll take a look at css solution @ZachSaucier mentioned above.

Share this post


Link to post
Share on other sites

Another option is not using ScrollMagic on small screens. Here's a thread from yesterday that shows how you can either enable/disable scenes or create/destroy the controller at certain widths. Maybe that'll give you some ideas too.

Happy tweening.

:)

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×