GSAP causing page movement, only on mobile devices,

[JohnMatrix]

Hello, I am using a simple gsap.from animation:
 

gsap.from('#photos',

        {

          y: 500,

          opacity: 0,

          duration: 1.5,

          ease: 'elastic'

        });

The side effect I am getting from GSAP (on mobile device only) is when I click my radio buttons for a contact form choice (which have event listeners on them), the page snaps upward about a screens height, losing sight of where the user was. (No, there are no associated anchors)
I thought this was only the radio buttons w/event listeners, but testing on a separate image on the page, w/no event listeners, butt has a transform animation, it causes the same effect, snapping the page up about a screens length.

This only happens on mobile testing...

(I know it is GSAP related because if I comment out the code, everything works normal)

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[JohnMatrix]

Hello GSAP helper, the issue with my doing a codepen for this instance is that a codepen does not replicate a mobile device. And since the issue is only arising when using an actual mobile device (my dev. page) or in chrome tools mobile device simulator, I cannot make a code pen that does any good.

[mvaneijgen]

Hi @JohnMatrix welcome to the forum!

 

There is a debugger mode on Codepen which we can check your minimal demo on mobile devices (even real once), so a minimal demo is the most helpful think you can provide at this point! Also just seeing all the code in action is much more helpful, right now we have 1/3 of your code, where is your CSS and HTML? And seeing it all in action really helps for getting a feel for what might be going wrong. 

 

✨ A demo speaks 1000 words ✨