Streaming live at 10am (PST)

Flip card interaction help


#1

Hi everyone,

I’m wondering if someone could help me :slight_smile: I’m having trouble with the card flip interaction.

When I hover over one of the cards, the card flips and you can see the text appearing from the other side, but as soon as the interaction is done the text disappears! I’ve done this before on a previous site, and it still works fine, but that was using the legacy interactions. Maybe I’m missing a trick - Please help!

Please find the preview link below, the flip cards are in the Service page - in ‘our services’ section.

Thank you so much in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/step-eco-website?preview=810f26021a3465d5e79ac78edec61b7d


#2

So you’re giving the hover trigger to the card, and you’ve probably set a hoverout event to flip the card the other way. So when the card flips, it shrinks and the cursor hoverouts of the card by itself, triggering the opposite interaction… and again and again.

When doing such interactions, you have to use another element as the trigger for the animation, and make the animation targets the actual card. For example, nest your Card element into another div, remove the interactions from the card, apply the interactions to the div and make sure the interaction still targets the Card element. Now it works well because the element that we use for the trigger doesn’t change shape.

5o9r8


#3

Hi @vincent, I just tried to do this :confused: but it hasn’t worked. Could you have another look at what I’m missing please?

Thank you


#4

No problem.

For the text to stay visible, let’s detach it more from the card.

Select the paragraph:

Now add a Transform on Z, this will detach the text a bitmore from the card, so it stays visible and doesn’t blend with the back of the card:


#5

@vincent you have yet again saved the day! Thank you, thank you, thank you!!! :hugs: