Jump to content
Search Community

Flexbox. Collapse one div while expanding another

Chuck Taylor test
Moderator Tag

Recommended Posts

I am trying to animate a layout change in which I have two divs side-by-side using flexbox. I want to animate the div on the right to appear to be moving off-screen right, while the one on the left expands to take up the full container width space.
Currently I keep getting a 'jump' in the width of these divs at frame 1. GSDevTools is enabled in this pen to see what happens when the timeline is advanced to the first frame.
 
Later, for mobile I will be doing a similar thing. However on mobile, I will have two divs stacked on top of each other. I want the top one to go away, which will shift the bottom one up. I guess in this second scenario, I will simply animate the height of the upper div to 0, and make sure I have overflow set to hidden.

See the Pen mdeRQoj by chucktaylor (@chucktaylor) on CodePen

Link to comment
Share on other sites

Thank you kindly Zach, your solution did the trick.

Not sure why I had the jump in my case.

I am starting with both divs having a width of 50%. When the animation starts, I was animating the LEFT div width to 100%, and the RIGHT div width to 0. For whatever reason, this causes a 'jump' on frame one.

 

However, in your solution, you set the LEFT div flex-grow: 1, and simply animate just the RIGHT div width. This seems to eliminate the problem I had. Thank you.

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