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

[Rob 15 Likes (Newbie)]

Hey.

(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

http://jsbin.com/refuquy/edit?html,css,js,output

 

 

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.

 

Thanks

See the Pen by refuquy (@refuquy) on CodePen

[Carl 9,066 Likes (Superhero)]

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 {
 display:none;
  -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. 

 

 

[OSUblake 9,990 Likes (Superhero)]

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.

[Rob 15 Likes (Newbie)]

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.

 

Thanks

Rob

[OSUblake 9,990 Likes (Superhero)]

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.