MadG Posted December 17, 2021 Share Posted December 17, 2021 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 More sharing options...
OSUblake Posted December 17, 2021 Share Posted December 17, 2021 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 More sharing options...
MadG Posted December 17, 2021 Author Share Posted December 17, 2021 @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 More sharing options...
OSUblake Posted December 17, 2021 Share Posted December 17, 2021 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 More sharing options...
MadG Posted December 17, 2021 Author Share Posted December 17, 2021 @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 More sharing options...
Solution OSUblake Posted December 17, 2021 Solution Share Posted December 17, 2021 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 2 Link to comment Share on other sites More sharing options...
MadG Posted December 17, 2021 Author Share Posted December 17, 2021 @OSUblake ok, makes sense. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now