Jump to content
GreenSock

Roman Kovalev

Accordion with dynamic height according to content inside

Recommended Posts

Hi, there! 
I'm making a common accordion for a project that uses GSAP. But faced with the following issue.
When I animate element like :

 

tl.from(element, .5, { height: 0 });

 

... it takes the initial height of element (which consists of content inside it), but when I change throught media query, for example, the font size, it is obvious that the height of element reduces. But it still uses the initial height. So I have spaces on the bottom, because of initial height. 

Is there a way to update the calculation of height, when somthing changes in css or maybe on resizes?

See the Pen BdZvMQ by NeedHate (@NeedHate) on CodePen

Link to comment
Share on other sites

Try animating using className so resulting values aren't applied to element.
 

tl.from(collapsible_element, .5, { className: "+=heightZero" }, 'open');

 

See the Pen EvXqRe by Sahil89 (@Sahil89) on CodePen

 

Link to comment
Share on other sites

Hi,

 

This is a very simple concept I made some time ago for a wordpress site:

 

See the Pen ZbGeJd by rhernando (@rhernando) on CodePen

 

The main thing to keep in mind is to kill any existing tween and create new ones after getting the new height of the element after the resize event. Is worth noticing that the animations are reeeeeeaaaally slow in order to test the code responsiveness, but you could use any GSAP instance you want. Also it could use some work in order to avoid looping through all the elements and do it just for the active ones.  Is not precisely what you're doing but hopefully will help you get started.

 

Happy tweening!!

  • Like 5
Link to comment
Share on other sites

7 hours ago, NeedHate said:

Is there a way to update the calculation of height, when somthing changes in css or maybe on resizes?

 

You can listen for media query changes. Here's a demo that reacts to media query changes and resize events. Notice how I save the state of the animation before I clear it, allowing the new animation to start in the same state as the old animation.

 

See the Pen jLLqbY by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Thank you guys for your clues and solutions. Will let you know in a while, what helped better. 

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