Element getting random offset on Flip

[grow.]

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.

[Sahil]

Use absolute: true, in Flip.fit, it will fix the jump.

[grow.]

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.

[Rodrigo]

Hi,

 

Maybe this demo can offer a simpler approach:

See the Pen XWOeLEb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[grow.]

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?

 

[Rodrigo]

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!