tweenmax.to becomes super slow when tweening 2 gifs(video attached)

[jimmy j]

I'm trying to TweenMax.to(JS version) a div which contains 2 gifs（640x1008）. It is doing fine on pc. But it becomes super slow on iphone 4s. (fine on iphone 6 though).  The strange thing is that: the animation is fine if there's only 1 gif in the div.

I've made a testing page: (Tap the gif will remove it. animation with 1 gif is smooth, but 2 gif is problematic.)

http://115.29.33.229/gifTween.html

 

I've also made a short vid clip: http://115.29.33.229/IMG_2743.mp4

[Jonathan]

Hello jimmy j, and welcome to the GreenSock forum!

 

Looks like you are animating the CSS left property.. which does not animate on a sub-pixel  level.. try animating the x (translateX) property instead.

:

// change this:
TweenMax.to(mdiv,1,{left:-640,yoyo:true,repeat:-1});

// to this:
TweenMax.to(mdiv,1,{x:-640,yoyo:true,repeat:-1});

:

Here is more info on why it is better to animate x and y versus left and top:

• Article by GreenSock's Jack: http://css-tricks.com/myth-busting-css-animations-vs-javascript/
• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Also make sure you are using the latest version of GSAP, and that your images are optimized for the web and at a tolerable file size. You could also add a slight rotation to your tween: rotation:0.001

 

Just a side note.. if this does not solve your issue. Please create a codepen so we can test and edit your code live.

 

Here is a nice video tut by GreenSock on how to create a codepen demo example.

 

We love code we can test live, it helps us help you faster

 

Additional reading:

• GSAP CSSPlugin Docs
• GSAP TweenMax Docs

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks a lot for the demo, very helpful. I converted it over to a CodePen using x instead of left (which was a great suggestion by Jonathan)

 

http://codepen.io/GreenSock/pen/QwvawP?editors=001

 

However, my iPhone4S appears to hate both versions

Seems the 4S just can't handle the gif animation. unfortunately, I'm quite certain this has nothing to with GSAP and that there isn't some magic fix we can throw in to make an old phone work better. If we think of anything, we'll let you know.

 

FWIW I replaced the animated gifs with pngs of a similar size and they ran great with x.

[Jonathan]

Thanks Carl for making the codepen demo

 

jimmy j .. I wonder maybe if you reduce the file size of the 2 gif images since they are both above 100kb (130kb) .. and i presume they are set to repeat forever?

[gdav]

Hi,

 

some general hints from my experience, because your demo is not longer available:

 

GIF animations are rendered via the browser render core engine, this is not very efficient.

Also a GIF will be rendered by the browser core if it is not in the viewport or hidden.

 

Avoid hiding (alpha) or display:none for GIFs, remove them completely from the DOM,

if they should not be shown.

 

Also try to optimize your GIF, so the render changes between each frame is reduced.

In general from my experiences:
avoid large GIF files if possible, do not use alpha transparency if not really needed.

 

Also try other programs as Photoshop to generate the GIF files, or optimize it with other tools, Photoshop creates (in most cases) GIFs with a large overhead.

 

Hope that helps

[jimmy j]

Thanks a lot! I will try to optimize the gif and see if that would solve the issue.

 

The weird thing is that tweening large gifs with CSS3 is very smooth...

[Rodrigo]

Hi,

 

In order to add to the great advice in this thread, check this article, it mentions a bunch of tools (on and offline) to compress images in the most common formats (jpg, png and gif) and at the end there's a table with all the results so you can choose the best tool for your needs:

 

http://www.creativebloq.com/design/image-compression-tools-1132865