Jump to content
Search Community

Accordion with dynamic height according to content inside

Roman Kovalev 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, 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



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 6
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 ?editors=0010 by osublake (@osublake) on CodePen


  • Like 5
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...