studioraygun

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.

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

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

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.

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

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.

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

Thanks for your replies guys, turns out I'd started my frame count from 1 when I should have started it at 0. This means that my end values were 144 frames and I had to reduce the overall height on background-position. Very frustrating but a lesson learned for future.

Hi I've searched high and low for the answer for this but no luck so far. I'm using SteppedEase to create a sprite sheet animation, but for some reason when the animation ends it flips back to the first frame. How can I make it stop at the last frame? Code is very simple: TweenMax.to(".globe__globe", 5, {backgroundPosition:'0 -67280px', ease:SteppedEase.config(145)}); Many thanks, Matt