Toggle display over autoAlpha

[icraft-websites]

Hey there forums,

 

Just a question regarding the autoAlpha plugin. I've been using autoAlpha throughout my page but would instead like to toggle the elements display from none to block or inline or what ever the preset state of the element is. It is my understanding that setting the elements display to none is more efficient than turning off its visibility, all though I could be wrong. 

[Carl]

Well, you can do

TweenLite.to("#redBox", 4, {opacity:0, display:"none"})

which will toggle display to none when the opacity tween ends.

Note this will take the element out of the document flow and perhaps cause other elements to shift as shown here: http://codepen.io/GreenSock/pen/Hzgac

 

Not so sure I know what you mean by "whatever the preset state of the element is" or how the CSSPlugin is supposed to know. Feel free to elaborate.

[GreenSock]

For the record, toggling display between "none" and "block" (or anything else) results in WORSE performance, not better (compared to visibility:hidden). The reason is because toggling display affects document flow, meaning the browser has to re-calculate where things are whereas simply toggling visibility tells it to show or hide the pixels of that element without affecting document flow. 

 

In short, if you're looking for the best performance, DON'T make the switch you're talking about. Just use autoAlpha At least in the vast majority of cases, that'd be my advice.

[icraft-websites]

@ Jack

 

Thank you for clearing this up, although lots of the elements I'm tweening are absolute positioned and outside the flow. Coming in from off screen ect.

 

@ Carl 

 

I was referring to weather the preset element was either 'block', inline-block', 'flex' ect.

[jamiejefferson]

(I think) you might be able to tween to display:"" to inherit what's in the stylesheet, but I could be wrong.

[ncpv]

(I think) you might be able to tween to display:"" to inherit what's in the stylesheet, but I could be wrong.

 

You are right. I tested it and it works!