Jump to content
GreenSock

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

Logo animation: off viewport image issue on mobile and tablet

Recommended Posts

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.

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×