Jump to content
Search Community

What's the best to tween hiding/showing elements (that disappear from flow)?

cerulean test
Moderator Tag

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

I'd like to understand the best way to do those 'hiding and showing" elements that are not in the HTML flow — for instance, the sort of thing where you slick on a form element and more choices appear underneath.  

 

I believe, from looking at the forums, that if you have an element that is hidden, and not in the flow, you set visibility:none,opacity:0 and then TweenMax.to(element, time {autoAlpha:1, visibility:block}) — but will this "slide" the element into place, that is both make it tween opacity as well as tween the other elements to make room?  If not, what's the best way to achieve this? 

 

How does one make it hide again? 

 

Perhaps I'm not on the right track, but it's an ubiquitous internet visual technique, so I'm open for best practices how to achieve. 

 

Or perhaps one should simply keep the place occupied, have visible:hidden?  — but then there are a lot of blank spaces, no?

 

Any help appreciated, sorry if at all vague.

Link to comment
Share on other sites

Hi,

 

The best approach is use autoAlpha and display. autoAlpha tweens the element's opacity and depending on the target value changes the visibility property to visible or hidden.

// tweens the element's opacity to 0
// when the tween is completed the visibility property is changed to hidden
TweenLite.to(element, 1, {autoAlpha:0});

// tweens the element's opacity to 1
// when the tween starts the visibility property is changed to visible
TweenLite.to(element, 1, {autoAlpha:1});

Now following the same approach you can add the display property to the same tween and it'll work in the exact same way as visibility does in autoAlpha. If you change the display propperty to none, the change will happen when the tween is completed. On the other hand it'll happen when the tween starts:

// the display property will be changed once the tween is completed
TweenLite.to(element, 1, {autoAlpha:0, display:"none"});

// the display property will be changed when the tween starts
TweenLite.to(element, 1, {autoAlpha:1, display:"block"});

Finally another option is use the elements with an absolute position inside a parent element with a relative position (for document flow issues). Use autoAlpha:0 to turn the element's opacity and visibility, then get the element's height and add/subtract that specific amount from the parent's height. It's a little more work but it looks far better than the parent's height changing abruptly as it happens with the display property.

  • Like 2
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.
×
×
  • Create New...