Streaming live at 10am (PST)

Card-Flip animation problem

Hey everyone, I am trying to make a card-flip animation for my gallery images. I followed video tutorial as well as written version but for some reason it flips the top card but does not show back card at all.

https://preview.webflow.com/preview/suffgallery?preview=1fbf2642a6d105be820c888a2bc06f5a

(I disabled Absolute positioning on front card to stop it from overlapping other images in my gallery. Enabling it did not fix the original problem.)

I will really appreciate any help.

Thanks

(EDIT: Link fixed)

Hi, your preview link doesn’t work for me, could you check again please?

Thanks Vincent, I’ve updated the link.

Sorry, at the moment, I don’t know. I had problems myself following this tutorial. I have to try it for myself from scratch.

No problem Vincent. It initially worked for me for a few minutes before the back image disappeared. I undid new additions but the problem persisted. I guess I will have to start from scratch again, but still I would love to know what went wrong to avoid this problem again in the future.

Thanks

I don’t even know why the backface of the front is showing. I would never have used images but rather divs with images in it or backgrounds, But I tried it too and the backface is showing. Also the Hover can’t be on this element or it loses the hover event assoon as it starts to flip… I never understood why this tutorial worked actually.

So I managed to get one card flipping for now. It will automatically stop working after a short time like it did before but for now I am not touching it. My question is this - how can I get other cards to work properly seeing how I am using same classes for them. Is there something I’m missing?

https://preview.webflow.com/preview/suffgallery?preview=1fbf2642a6d105be820c888a2bc06f5a

I took a peek, and I’m curious about this too – I couldn’t find any reason.

As a work-around, you could simply copy the one that works, modify each copy as needed, and delete the ones that don’t. (I tested this idea, and it seems to work.)

what element do you have the interaction (card flip) set for ?

Thanks @tkister This method worked for as well but I still can’t understand why it has to be this way. I really appreciate the help.

@Revolution it’s the first tile on left top row. It flips to show back image but all other tiles do not. A workaround Tina and I found is to duplicate the first tile. It’s annoying but since I’m still in planning phase, it’s not an issue. Let’s hope it stays this way.

see if this helps any.

https://preview.webflow.com/preview/card-flip?preview=ab7a9f244546546aaa8a6dbdb7368aad

I went the transition method instead of the css state method.

To insert the animation into my videos I usually use Viosk , may be will be helpful for someone. I had just the similar problem some time ago, so that I solve it just using this tool.

I think OP needs dynamic - not static data.

I actually got it to work using interactions which is much more reliable and far better looking. Here is an older version: http://suff2.webflow.io/.

cool. I see… my demo was able to help. I’m glad :slightly_smiling:

Excellent job with adding the video. I just saw that !

1 Like

Can’t thank you enough for that @Revolution. Your idea was actually far superior than what I had envisioned and this is what I’m going with for the site. Appreciate your help man.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.