Tweening canvas problem on mobile.

[gargara1]

Hi guys, I am developing one motion heavy portfolio and I have a very strange problem only on mobile. In the web site there is a canvas with animation, that I tween when user scrolls down.

TweenMax.to("#canvas1", 0.5, {y:"-80%",   ease:Power3.easeIn, onComplete: smallOver});     

 

This works perfectly on desktop, but in mobile it is causing the <iframes> in the content below to scroll faster then the rest of the content (they are also canvases). The particular thing is that if I don't tween the canvas everything works great. I tried without the function at the end and it stills causes this problem:

TweenMax.to("#canvas1", 0.5, {y:"-80%",   ease:Power3.easeIn});    

 

 

I also added console.logs so you can see when it is called. 

 Please if somebody have any idea what can be the problem to let me know. 

Here is a link: https://bellavistabulgaria.bg/test3/site/index.html

[GreenSock]

Hi @gargara1. Welcome to the forums!

 

I didn't really notice any problems on my iPhone, but I might be missing something. It would be really, really helpful if you could provide a reduced test case in codepen or something (and please, only the absolute essential code to show the problem). It's too difficult to troubleshoot a live site like that. 

 

Also, I noticed you've got some odd tweens that are tweening BOTH xPercent AND x (to a percentage value) which doesn't make sense. If you want to animate to a percentage value, you should always use xPercent/yPercent. When you pass a %-based value to x, it simple converts it internally and passes it to xPercent. So this is basically telling it to animate to -70% and also -50% at exactly the same time (illogical): 

{xPercent:-50, x:"-70%"} //weird

 

If you still need some help, please provide a reduced test case in codepen and we'd be happy to take a peek.