Inquiry about 180-Degree Flip Card Effect in Relume Library

·Dec 16, 2024 09:29 PM

Hey Matt J.! Are there any components within the Relume library right now that do a 180-degree flip effect on hover? Essentially creating a 2-sided card that flips from front-to-back upon mouse hover.

4 comments

· Sorted by Oldest

Matt J.
·
Alex S. nope! That would fall into styling/design details that we would try to avoid. There are likely a lot of cloneables or tutorials out there - I would search the Webflow marketplace for some if you want to learn how to do it!
👍1
Sam G.
·
Hey Alex S. I created a solution to this on a client project of mine recently. https://preview.webflow.com/preview/hatchery-group-madebyprisma?utm_medium=preview_lin[…]&pageId=67224bee3a70b4656f150d41&locale=en&workflow=preview You have to create two content divs that hides one or the other with some interactions for an IN and OUT with an X axis animation that makes it seem like it's flipping by condensing the width to 0 when you are simultaneously swapping out the two content cards.
Sam G.
·
I also just realized this was a very old post, oops 🙃
Alex S.
·
Thank you for sending this through, Sam G.! I appreciate you taking the time to walk through this. 🙂
👍1

Matt J.
·
Alex S. nope! That would fall into styling/design details that we would try to avoid. There are likely a lot of cloneables or tutorials out there - I would search the Webflow marketplace for some if you want to learn how to do it!
👍1
Sam G.
·
Hey Alex S. I created a solution to this on a client project of mine recently. https://preview.webflow.com/preview/hatchery-group-madebyprisma?utm_medium=preview_lin[…]&pageId=67224bee3a70b4656f150d41&locale=en&workflow=preview You have to create two content divs that hides one or the other with some interactions for an IN and OUT with an X axis animation that makes it seem like it's flipping by condensing the width to 0 when you are simultaneously swapping out the two content cards.
Sam G.
·
I also just realized this was a very old post, oops 🙃
Alex S.
·
Thank you for sending this through, Sam G.! I appreciate you taking the time to walk through this. 🙂
👍1