Jump to content


Relative from tweens do not calculate transform correctly when elements display:none

Recommended Posts


(Topic could be misleading, this only refers to elements that are initially display: none)


I'm using display none to reduce CPU usage on a complicated scene for elements that are no longer in the scene rather than using visibility.


However using display none breaks some of my from tweens that tween transform where the object has a default transform for example scale.


Here's an example




The red box has normal display

The green box has transform: scale(3) and normal display, on x tween the transform takes into account the scale(3)

The blue box has transform: scale(3) but his initially display none, it loses the initial transform scale(3) upon x transform

The yellow/orange box, to illustrate this is just a "from" issue, this box is initially display none but it retains the scale(3) upon x transform


Is this a bug or just behaviour I need to anticipate?

Hope that makes sense.



See the Pen by refuquy (@refuquy) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Rob,

Thanks for putting together the demo, very helpful.


The core issue here is that browsers (especially Chrome) will not report transform values (correctly or at all) with display:none. 

Check out this pen from the folks at css-tricks that illustrates how to read transform values:


http://codepen.io/chriscoyier/pen/raLWpe?editors=001 ( open the console)


You will notice that it reports the matrix, scale and rotate values.


now add: display:none to the css of div


div {
  -webkit-transform: rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);
  -moz-transform:    rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px); 
  -ms-transform:     rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px); 
  -o-transform:      rotate(30deg) scale(1.2) skew(10deg) translate(5px, 5px);  

you will notice that it no longer works and it will throw an error.


Unfortunately if the browser does not report this info, GSAP can not record or set those values for the starting values of from() tweens. 



  • Like 6
Link to comment
Share on other sites

Elements that have display: none are not in the render tree, so things can get screwy. How many elements are you trying to hide? I doubt the performance difference is noticeable. In fact, it could be worse with display: none because it will causes a reflow when you want to display it.

  • Like 3
Link to comment
Share on other sites

Hey guys thanks for your time,


My project is a 20 minute animated story with SVG.

The performance is definitely noticeable, I have > 1000 objects hidden at one time.

The story is split up into chapters and scenes.


I have a staging area which has display: none where chapters that are not playing are off screen and being display: none do not consume drawing calls in the browser. The individual objects naturally inherit this display property and are not drawn.

Without display none on hidden chapters, there's well over 1000 individual objects being drawn.

Chrome chews up ~250% CPU on my i7 Mac and heats it up well.
On mobile framerate suffers considerably on medium spec hardware.


I have delayed setting display:none on the staging area until after initialisation and all tweens have been configured and all is well, I have the performance benefits of only rendering the objects required and all the tweens were configured during initialization/loading.




Link to comment
Share on other sites

I was thinking like 20 elements. But 1000 elements in a 20 minute animation... yeah, that's pretty hardcore! I definitely would like to see that when you're done.

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.