Jump to content
Search Community

expandable div

shunryu111 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

hi.. i'm trying to animate a div expanding and collapsing by animating the css height property with TweenMax

 

TweenMax.from(testDiv, .35, {css:{height:0}, ease:Cubic.easeOut});

 

this only animates the background of the div it seems.. not the text that's in it. the text is always visible. here's the div

 

<div id="testDiv"
 style="position: absolute; background-color: rgba(255, 0, 0, .5); width: 320px; height:260px;">
</div>

 

i've tried jQuery slideDown() and this works hiding and revealing both background and text content

 

any ideas?

 

i'd rather use TweenMax for this

Link to comment
Share on other sites

  • 2 months later...

I have a question about this — hopefully this thread still somewhat active —

 

Does an HTML element (such as DIV), have an inherent height right from the get-go? That is, if you set height to 0, and you to a tween.from(0), as in this example, it always knows the "original" height? (i.e. in Flash alpha terms, if you set a MC's alpha to 0, and then tween.from(0), you have to somehow let it know what it's tweening TO -- I know this is a simple conceptual issue transitioning from Flash, but I'm trying to get my head around the looser rules of the JS/DOM world, where one can take a few more things for granted.

 

UPDATE: it seems that once you set a DIV's height to '0px" you can't simply "tween.from(0px) and expect it to "know" what the original height was. In Flash you save this in a separate variable, perhaps. Is there a way using jQuery/JS to find out the 'natural' height of an element whose height you've set to 0px, or is this not possible/reasonable?

Link to comment
Share on other sites

// div with height already set to 0px
var mydiv = $('div');
// clear the forced height, so height should now be the default
mydiv.css('height', '');
// tween from 0 to the default height
TweenLite.from(mydiv, 1, { css:{ height:0 } });

This is a good way to calculate mydiv's 'current' height if you ever add/remove elements to it.

 

Alternatively, if you want to 'save' the original height and reuse that, then you can use data-attributes to attach the information to the div. jQuery has a very simple .data() method for this.

// create an 'originalheight' data attribute on mydiv
mydiv.data('originalheight', mydiv.height());
mydiv.css('height', 0);
// tween from current height (0) to the original height
TweenLite.to(mydiv, 1, { css:{ height:mydiv.data('originalheight') } });

 

Note: data attributes were introduced in HTML5, and allow you to create your own DOM attributes without it being invalid. While they aren't 'supported' in non-HTML5 browsers, they still work even if they don't validate. They are prefixed with data- e.g.

<div data-customattribute='somevalue' />

jQuery .data() leverages this, so if you have the data attribute in your original HTML, a call to .data('customattribute') will return 'somevalue'.

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