grow. Posted March 31 Share Posted March 31 Hi there! I've been working on a modal for some products. I found the best way was to use the Flip.fit() to overlay the 'duplicate' modal elements before transiting them back to their original state. This is why I've had to use the Flip.to() method (open to other suggestions though!). What appears to be happening now is that the title causes the image to offset on Flip. The original state is required to have the .hxl class but has been scaled down to fit the original title. Any suggestions on how I can prevent the offset and transition it smoothly? Cheers! See the Pen WNWXxxj by benjaminelwoods (@benjaminelwoods) on CodePen Link to comment Share on other sites More sharing options...
Sahil Posted April 1 Share Posted April 1 Use absolute: true, in Flip.fit, it will fix the jump. 1 Link to comment Share on other sites More sharing options...
grow. Posted April 1 Author Share Posted April 1 31 minutes ago, Sahil said: Use absolute: true, in Flip.fit, it will fix the jump. Unfortunately I need it to affect surrounding elements both during transition and after. Link to comment Share on other sites More sharing options...
Rodrigo Posted April 1 Share Posted April 1 Hi, Maybe this demo can offer a simpler approach: See the Pen XWOeLEb by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
grow. Posted April 2 Author Share Posted April 2 17 hours ago, Rodrigo said: Hi, Maybe this demo can offer a simpler approach: Hopefully this helps. Happy Tweening! Hey Rodrigo, Thanks for your response. I've spent a while trying to translate this into a solution that works for my use case but it seems that while the opening works fine (within reason) - closing the modal/reversing seems to go wildly wrong. On my non-CodePen version the primary issue is that when the elements are appended back to the product card, they're obviously put behind the overlay immediately. On the CodePen I've attempted to recreate this as best as possible, however it's more or less highlighted a potentially further issue. See the Pen bGJYzYb by benjaminelwoods (@benjaminelwoods) on CodePen Do you have any suggestions? Link to comment Share on other sites More sharing options...
Rodrigo Posted April 2 Share Posted April 2 Hi, Unfortunately I don't have time to comb through your setup and find what the issue is. I came up with this demo that is as close as I can get to your demo without spending more time than I have for it: See the Pen poBpvMM by GreenSock (@GreenSock) on CodePen As you can see I'm using a different setup that is not fully responsive and fluid as yours (I'll leave that to you), but the main concept is there. Hopefully this helps Happy Tweening! 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