Jump to content

Flash Floods

Animating Width of Flexbox Parent Doesn't Affect Children?

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 use TweenLite to tween in the width of the blue sidebar down to zero. Unfortunately, the content of the blue sidebar breaks outside of the bounds of the parent.


This is something that really should never happen with Flexbox, but the child elements are also Flex containers so I'm sure what I'm doing wrong here. :( If anyone has any suggestions please let me know. Thanks! 


Here a link tot he live demo: https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/

And here you can read the source code: https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages


ps. Id like to get this working, but I'm wordering if there is a way to get the center green piece to stretch to fill the container as the blue column shrinks without using Flexbox.

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Hello Flash Floods, and Welcome to the GreenSock Forum!


Thank you for the examples, but its best if you create a limited codepen example. This way we can test your code live. Unfortunately it is really difficult to test your code without being able to edit the code in a live editable environment.


Here is a video tut on how to create a codepen demo example so we can test your code live:



Thanks :)

  • Like 1
Link to comment
Share on other sites

Try to make a demo next time, but you can position the children absolutely.

See the Pen fb80c3038dae04e6575566d25c87b4af?editors=0010 by osublake (@osublake) on CodePen


Here's a demo where I animate every flexbox property. All the width and height animations are done using children that are positioned absolutely.

See the Pen dMLQJr?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
  • Thanks 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.