Jump to content
GreenSock

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

Disaster on mobile device

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've read a few topics about performance on mobile devices to no avail. We've just put a site up for testing and it's complete unusable. I can't be sure, as this is the first time I've used Green Sock but it appears to be this that is causing the problems. We have, admittedly, some extremely large image files that act as spritesheets that we loop through to create animation. Please see: 

 

http://srgunltd.co.uk/zoa

 

On most "desktop" machines this works absolutely fine (we still need a preloader of some description) but on my iPhone 5 it's utterly useless. It looks like each frame is taking 2-3 seconds to load - is there something obvious I'm missing here? I've never experience such poor animation performance in my life, and with it performing so well on desktop devices I'm a bit baffled.

 

Thanks

Link to comment
Share on other sites

Hmm, have you tried with a different device?

 

I'm using an iPhone 5s with iOS 8.2 and the animation performance is great. The parts I can see (start animation and the devices animation) run smoothly.

 

The section with the bubble "Exercising an understanding of how knowledge...." doesn't animate in, which may be an issue with how you are detecting where the screen is and firing off that animation.

 

Also remember with iOS devices, Safari pauses any JS from running when you are scrolling. 

Link to comment
Share on other sites

Thanks for your reply. This is interesting - it seems to function reasonably well using Safari but using Chrome it is just awful. I've been developing in Chrome on my Mac and it's been absolutely fine (testing in Safari and FireFox as well - fine again). I wonder why Chrome is failing -- we've tested on two iPhone 5's.

Link to comment
Share on other sites

I think I need to somehow use "hardware acceleration" instead of background-position. This line:

TweenMax.to(".globe__globe", 4, {backgroundPosition:'0 bottom', ease:SteppedEase.config(72)}); 

How can I change this to use hardware acceleration? I've tested using:

x:'100px'

and it's very smooth on Chrome, so I need a way to make this work with background-position.

 

Thanks

Link to comment
Share on other sites

Hi studioraygun ... yes, hardware acceleration is going to be key here. Animating the background position is very choppy in anything other than Safari desktop (from my own experiences as of late).

 

I overcame this by injecting a child element into the element that I wanted to animate the background on, set the overflow of the (now) parent element to hidden, and applied the background to the new child element. That then allowed me to animate the y position (which is hardware accelerated) of the child within the masking parent. This gives the effect that the background is moving when all that is happening is reality is an element's y position is being modified.

 

You can see the effect in the header here (https://www.reynoldsplantation.com). It's very smooth in all browsers on desktop and in iOS Safari (tested iPhone 5, 5s, 6 ... iPad 2, Air)

 

This is not a Greensock issue as these non-hardware accelerated issues would popup using anything.

 

The other issues you might have are due to the fact that the page is extremely heavy (6.16MB). The file globe__globe.png is 4.4MB itself! I ran the image through tinypng.com and was able to shave 77% of the file size off (down to 1MB). That could help load times tremendously. Also, GZIP is not enabled on the server. You could save significant bandwidth (and therefor decrease load times further) by enabling GZIP.

  • Like 3
Link to comment
Share on other sites

If you want to animate the x you will need to nest an <img> in a <div> with overflow:hidden.

This may give some performance benefits as according to http://csstriggers.com/ changing the background-position will cause a costly repaint.

 

Foreground

http://codepen.io/GreenSock/pen/PqzXKd/ 

no paints

j8PQpLP.png

 

Background

http://codepen.io/GreenSock/pen/vLFmd

some paints

iUABuis.png

  • Like 3
Link to comment
Share on other sites

looks like Shaun, beat me to it. 

Great work! Thanks!

  • Like 1
Link to comment
Share on other sites

 

Also remember with iOS devices, Safari pauses any JS from running when you are scrolling. 

 

Just an FYI .. as of iOS 8, js fires while scrolling. That one "little" change has made life so much better! :)

Link to comment
Share on other sites

Thanks guys, I've a lot to learn about animation. I tried the solution above; an image in a div, and I see the exact same result:

TweenMax.to(".globe__globe img", 4, {y:'-29153px', ease:SteppedEase.config(72)});

Refresh the page now with these changes applied and the globe still rises very staggered and poorly.

Link to comment
Share on other sites

Thanks guys, I've a lot to learn about animation. I tried the solution above; an image in a div, and I see the exact same result:

TweenMax.to(".globe__globe img", 4, {y:'-29153px', ease:SteppedEase.config(72)});

Refresh the page now with these changes applied and the globe still rises very staggered and poorly.

 

 

Animate the y, not the margin-top...that should help.

 

See the Pen mJEvrg by sgorneau (@sgorneau) on CodePen

 

*Edit: sorry for anything that looked wacky...the globe image was changed (reduced in dimensions) while I was making this. I uploaded the local asset, so it should be good now.

  • Like 1
Link to comment
Share on other sites

Thanks Shaun - it's still really slow though, see: http://srgunltd.co.uk/zoa/

 

I'll continue to tweak it. Do you think the image is just too large in height?

 

Thanks again

Matt

Link to comment
Share on other sites

I see you've updated the Codepen and it works fine on Chrome on my iPhone5. I've replicated this code entirely on my page and it's still playing really badly. Absolutely no idea why this is the case...

Link to comment
Share on other sites

The codepen I provided is really smooth here ... OS X Safari, Chrome, Firefox and iPhone 6 Safari + Chrome, iPhone 5 Chrome. I can't get the image to load in Safari on iPhone 5 and older though (too large). What are you testing in?

  • Like 1
Link to comment
Share on other sites

I think the best bet is to just try to isolate as many of the animations effects as possible.

Here is the globe animation on its own

 

pen: http://codepen.io/GreenSock/pen/LVZqmM 

debug: http://s.codepen.io/GreenSock/debug/LVZqmM? (no iframes)

 

Test that, does you device choke? then try moving it with a y tween. 

 

 

Like Shaun, I suspect the image size (dimensions and weight) could be a factor.

I converted the globe to a 518kb gif.

 

Also, underpowered devices are going to struggle with large images that are semi-transparent -- like maybe your clouds.

  • Like 2
Link to comment
Share on other sites

I see you've updated the Codepen and it works fine on Chrome on my iPhone5. I've replicated this code entirely on my page and it's still playing really badly. Absolutely no idea why this is the case...

 What is the page (on your site) really bad on...iPhone 5?

Link to comment
Share on other sites

I think I've narrowed down the problem - it seems to be something to do with the amount of animations going on. If I comment out all the other animations on the page, I get a smooth animation of the globe. As soon as I introduce another piece of movement, i.e. the text at the very top fading in, you see the animation immediately slow down to an almost standstill. Unsure if this is a poor implementation by me, crappy handling by the browser or something to do with GS.

Link to comment
Share on other sites

I think I've narrowed down the problem - it seems to be something to do with the amount of animations going on. If I comment out all the other animations on the page, I get a smooth animation of the globe. As soon as I introduce another piece of movement, i.e. the text at the very top fading in, you see the animation immediately slow down to an almost standstill. Unsure if this is a poor implementation by me, crappy handling by the browser or something to do with GS.

 

Have you utilized hardware acceleration everywhere possible? I would start there. The code is gone from your site now, so I'm not sure of the text at the top was fading in only or moving vertically while fading. I would look at everything using top, left, margin etc for movement and convert those to x/y transitions.

  • 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.
×