Trouble with flip card animation

[EMcQ (John Jason)]

Hi Everyone,

I am currently having an issue with a 3D flip card animation for a client’s website. When I first made the flip cards, I was having an issue on safari where the elements on the front of the card would show through the back of the card. I found a solution and that was to make the front cards opacity set to zero as well as setting the front to hidden in the interactions panel. It worked and the elements stopped showing through the back of the card.

I originally made these cards to flip on hover and it worked, but then the client wanted these particular set of cards to flip once a button is clicked. So i set the trigger on the front of the card to flip once clicked and that was fine, but now I am trying to get the button on the back to flip the card to the front after the initial flip and it’s not working. I’ve literally tried everything, but I just can’t seem to figure this one out. Nothing shows when I click on the back button.

The cards I am referring to are the “Coverage Plans” cards on the homepage.

Here’s my share link:
https://preview.webflow.com/preview/drivewise-website?utm_medium=preview_link&utm_source=designer&utm_content=drivewise-website&preview=fdd46c825eb27ec2189ed15e3837db9a&mode=preview

[Peter.DipPark (Peter)]

I think what you need to do is copy “mouse-hover-out” animation, change class target to “Only parents with this class” and add this interaction to ‘benefits-card-back’ element that will trigger on “Mouse click (tap)”.

P.

[EMcQ (John Jason)]

Hi Peter! Thanks for the reply. I was actually referring to the cards below the coverage benefits. Its the cards under Coverage plans that I am having trouble with.

[Peter.DipPark (Peter)]

I see. Mostly likely the event is consumed by the parent element so I think you should add interactions to “Coverage-card-front” element and the “back button” element.

P.