I’m wondering if someone could help me 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.
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.
I’m having trouble with the card flip interaction.
but it hasn’t worked. Could you have another look at what I’m missing please?