css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Animating Flexbox properties using relative animations. Layout is done with CSS. GreenSock is used to animate the difference in layout changes. Animations will also play if you resize the window.

Based on the Flexbox Playground created by Gabi.

TODO: Use additive animations.


  1. Thank you. So much better!

  2. @enxaneta Well thanks for making this! I knew I could animate some flexbox stuff, but I never actually tried to do all the properties. I couldn't think of a good way to display everything in a way that could be animated, and then I saw your playground, which was perfect. And the best part was that I didn't have to modify any of your code to make it work.

  3. This is great!

  4. It seems like there is a problem today with this awesome pen :/ [edit: Thanks a lot for this very helpful pen and thank you for fixing it ]

  5. @newemka thanks for pointing this out. I'll look into the problem later today.

  6. Can you explain how you animated the Flex-Wrap elements? I need to do exactly that, and even using JS /jQuery I can't get a complete answer out of anyone on how to animate line-wrapping.

  7. @trose I'm not doing the wrapping. The browser is. I'm just animating the difference between the old and new position when it changes.


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.