Logo animation: off viewport image issue on mobile and tablet

FrancoisH · November 17, 2014

Hello there,

As a new user of your fabulous library, I'm experimenting and I just went into a big issue.

On my computer, all is displaying fine but on my iPad and mobile, I've an issue.

I'm trying to animate my logo making images coming from the sides to the center of the screen. If on computer the effect is just as I designed it, on the tablet and the mobile phone, the browser resize (scale down) to fit to the new width of the page according to the position of the image on the left (not on the right side).

Do i have a way to force browser to keep the page width and not scale down to fit in the logo?

Here's a link to the animation: http://francoish.net/test/

Kind regards.

Jonathan · November 17, 2014

Hello FrancoisH, and Welcome to the GreenSock Forum!

Since you are using media queries in your CSS, you can set the viewport width to the device width .. width=device-width ..

:

<meta name="viewport" content="width=device-width">

:

Add that viewport tag right after the beginning <head> tag.

:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">

</head>
<body>

</body>
</html>

Resources:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

I hope this helps!

FrancoisH · November 17, 2014

I am such a stu... boy!

I always put this meta as my friend, who's more versed into CSS3/HTML5 than I am always told me to put this one (I focus more on JavaScript, PHP & SQL for his projects).

The suggestion reminded me to put the famous line :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

It solved partially my issue. I think I'll disable this animation on mobile phone because it's laggy and safari doesn't like so much 3D transormation. It's displaying fine on chrome for iOS but not on Safari.

Anyway, thank you for the quick and detailed answer.

Jonathan · November 18, 2014

looks like you animating left and top, instead of animating x (translateX) and y (translateY) which animates on a sub-pixel level

inside of your tweens change left to x .. and change top to y and see if that helps.

also you can use hardware acceleration by adding force3D:"auto" to your tween

see CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

force3D

when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.

looks like you animating really large images.. what is the target device width for your animation?

you could end up reducing the image sizes and content width if your targeting mobile phones only, or tablets ?

hope that helps

Notifications

Messages

Logo animation: off viewport image issue on mobile and tablet

Warning: Please note

Recommended Posts

FrancoisH

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

FrancoisH

Link to comment

Share on other sites

Jonathan

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members