Jump to content
Search Community

GSAP Accordion grid with full width/height children

DD77 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'm trying to have the expanded container on a full width. I was wondering if there's a way with GSAP. 
My full-width container once active should expand full width. Bu also should push the content below. So it can't be positioned absolutely. 

Please click any product, the expanded content should be full width, max-width:1200px. 
Any what I can Achieve it in GSAP? 

See the Pen QOMXRJ by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Not really sure what to suggest here. Either there are some advanced css techniques that you will need or you'll need to animate things below down based on the height of the div when it is full width. Not really something GSAP will do for you naturally. Perhaps other people will have some ideas but its a bit beyond our typical product support. Sorry I don't have a better solution for you.

  • Like 1
Link to comment
Share on other sites

Yes and no. You can't animate flexbox so you will have to do some extra work for it. There are some issues with your entire setup at the moment, for example you have nested '&.active' class under '.accordian-group.item' but from javascript you are adding active class to '.accordian-content'.


Following is the thread where @OSUblake explains how you can animate flexbox by recording start and end positions. In current situation you will have to expand and shrink columns.



  • Like 3
Link to comment
Share on other sites

You can animate flexbox with GSAP as long as the flexbox property value is not a keyword string. Also if you do choose to animate flexbox, keep in mind that flexbox has limitations, like requiring a specific height (even if added dynamically with JS) on its main flex container to animate properly. Sometmes using CSS Grids is a better option than CSS Flexbox, but it all depends on your animation goals :)

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