Jump to content
GreenSock

icraft-websites

Toggle display over autoAlpha

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

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

(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!

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