Jump to content
Search Community

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

cmal test
Moderator Tag

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

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