Cannot get translate y to work on ios mobile/tablet but fine on windows browsers

[RealMakAttak]

Hello All,

 

I hope you can help, I am making the standard hamburger icon in to an X on click.

 

Here is my timeline:

 

 var hamburgerLiTimeline = new TimelineMax();

            hamburgerLiTimeline.pause();

            

            hamburgerLiTimeline.to(hamburgerLiOne, 0.5, { y:11, rotation:45})

                                .to(hamburgerLiThree, 0.5, {y:-11, rotation:-45}, 0)

                                .to(hamburgerLiTwo, 0.01, {autoAlpha:0}, 0)

                                 .to(hamburgerLi, 0.5, { background:"rgba(255, 255, 255, 1)"}, 0); 

 

This works fine on my desktop browser but when I either go in to device mode on the Chrome browser or actually use the site on a mobile/tablet, the y translation doesn't work, the li's only get rotated...

 

I have been banging my head against the wall for hours trying to figure out why...can anyone help?

 

Many thanks.

[Carl]

Hi and welcome to the GreenSock forums,

 

Sorry to hear you are having problems.

 

Please provide a very simple demo that we can test. Unfortunately, its impossible to tell just by looking at the code you provided.

 

This post explains how to create a CodePen demo that we can test and edit.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks!

[RealMakAttak]

Hi and welcome to the GreenSock forums,

 

Sorry to hear you are having problems.

 

Please provide a very simple demo that we can test. Unfortunately, its impossible to tell just by looking at the code you provided.

 

This post explains how to create a CodePen demo that we can test and edit.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks!

 

Hello Carl,

 

I made a codepen and it actually worked, the top and bottom li's translated down and up respectively to form the cross, ( well I opened it up on my mobile and it did), I am honestly stumped for why?!

 

See the Pen xRqrqQ by RealMakAttak (@RealMakAttak) on CodePen

 

I copied and pasted the code over from my source docs...

 

What could cause something in gsap to work on desktop but not mobile and then in the codepen on mobile?!

 

In that tween:

 

hamburgerLiTimeline.to(hamburgerLiOne, 0.5, { y:"11px", rotation:45})

                                .to(hamburgerLiThree, 0.5, {y:"-11px", rotation:-45}, 0)

                                .to(hamburgerLiTwo, 0.01, {autoAlpha:0}, 0)

                                 .to(hamburgerLi, 0.5, { background:"rgba(215, 35, 255, 1)"}, 0); 

 

everything except the y translation is working fine...

 

Any ideas?

 

Thanks

 

UPDATE: I managed ot pin down what it was, I had an onmouseenter animation that was also animating the #hamburger li y: value with GSAP...I have had to disable it for it to work...why is that do you think? Is there any way I could have both?

[Carl]

hmm, not sure what the problem could have been. Nothing in your code jumps out as anything that would be at all problematic on desktop or mobile. 
Animating y and rotation should work everywhere.

If you can provide a demo of your code that doesn't work we will take a look at it.

 

Glad you got it working.

[Jonathan]

I see this issue happen all the time in Codepen

 

I saw this error in the browser console

An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing

Sometimes that happens if the page is http and the JS scripts pulling in have https. in that case you can make your JS scripts be agnostic with no protocol

 

So this with https protocol

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

Becomes this with no protocol

//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

Happy Tweening