Jump to content

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

Problem with FLIPping items staying position: absolute after animation

Go to solution Solved by OSUblake,

Recommended Posts

Hey all, 


Little bug I'm trying to figure out the cleanest way to fix. In the codepen, clicking a box FLIP fits it to the top right of the screen, then clicking that same box in the top right FLIP fits it back to its position. However, when it moves back into position, it stays position: absolute. So, if you then click the second box in the first row, the first row collapses since it isn't fixed height. Is there a clean way to revert the item to all of its pre-FLIP style parameters without using .set ? 

See the Pen eYGWroR by kslaton (@kslaton) on CodePen

Link to comment
Share on other sites

Hi @MadG


Before offering any advice, I'd like to fully understand what your end goal here is. Using fit is might not be the best solution for what you're doing. 

Link to comment
Share on other sites

@OSUblake sure. This is a simple version of a site I'm working on where I have grid of photos. When I click a photo, the others fade out, and the photo moves into an absolutely positioned lightbox. The photo's lightbox position needs to always be in the same place on the page, vertically centered and then horizontally centered in the left half of the page. The photos are not all square, but before running the flip animation I'm getting the target photo's aspect ratio and setting the lightbox placeholder to the same aspect ratio. Then, on clicking the backdrop or a close button, the photo moves back into its place in the grid and all the other photos fade back in. Is that all making sense?

Link to comment
Share on other sites

Gotcha. Here's how I'd solve this. I find it much easier to animate an element inside of a grid item instead of the grid item itself. The same goes for flexbox or anything else that might cause the layout to collapse. 


See the Pen abLWjWb by GreenSock (@GreenSock) on CodePen


Link to comment
Share on other sites

@OSUblake that makes sense and I'll see if I can do that. Out of curiosity though, how would you handle it if the element you're animating has to set the width or height of its parent? Just manually remove the absolute positioning once it gets back in place?

Link to comment
Share on other sites

  • Solution

I'm not even doing absolute in that demo because it's really not needed. So here's another version where I'm randomly changing the width and height of the final position box.


See the Pen bGoWxNO by GreenSock (@GreenSock) on CodePen


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