Jump to content

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


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

Are there any things in CSS I can use that will speed up Tweenmax particularly for large images?




-webkit-transform: translate3d(0, 0, 0); 

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
Or does Tweenmax handle this, also should these be applied to those that aren't images?
Link to comment
Share on other sites



Usually this kind of issues have more to do with browser rendering than GSAP or even CSS animations themselves.


As a personal preference I don't move around big images unless the client forces me to do so, understanding of course that the client is always right even when it's wrong and not that sometimes my business meetings end in a cage match... that would be bad for business.. at least this line of business  :mrgreen:


If big images need to be animated try using an actual <img> tag instead of a background and translate it instead of animating top/left values. Also you could use force3D:true in that particular tween:

TweenLite.to("#bigImage", time, {x:value, y:value, force3D:true});

That will pass the image animation to a GPU layer, taking the burden from the browser and could speed things up.


Finally a codepen demo would help to see what's the issue and how could it be solved.



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