Jump to content
Search Community

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

jimmy j test
Moderator Tag

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


I've also made a short vid clip:

Link to comment
Share on other sites

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:

// to this:


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

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:


  • Like 1
Link to comment
Share on other sites

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)




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.

  • Like 1
Link to comment
Share on other sites



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

  • Like 1
Link to comment
Share on other sites



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:



  • Like 2
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.
  • Create New...