Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Flexbox Filtering with Flip - Incorrect container height during Flip causes following content to overlap

Go to solution Solved by Thomas Günther,

Recommended Posts

I found a Codepen created by Greensock that exactly matches the behavior I'm looking for on a project, using Flip with onEnter and onLeave to filter items very smoothly.


The only problem is that any DOM content that follows the parent of the Flipping elements will be incorrectly positioned during the Flip, which causes some unsightly overlap. I'm not exactly sure how to remedy this, or even if it can be remedied using this approach.


Any suggestions?


Here is a Codepen demonstrating the issue. The only change made to the original Codepen example is the addition of a sibling container to demonstrate the overlap clearly.


Thank you!

See the Pen 94eb5be236cb0b2faba33b6cf2a52b7d by cmalven (@cmalven) on CodePen

Link to comment
Share on other sites

Just include the next-container, and any other containers that that will change size/position in the Flip animation.

  • Like 1
Link to comment
Share on other sites

  • Solution

I had the same question a while back and got a very nice solution here: 


  • Like 3
Link to comment
Share on other sites

Thanks for dropping that link Thomas!

Link to comment
Share on other sites

@Thomas Günther Thank you so much! That is exactly the solution I was looking for and works great. Really saved me some digging!

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