Streaming live at 10am (PST)

Card-Flip animation problem


#1

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)


#2

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


#3

Thanks Vincent, I've updated the link.


#4

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


#5

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


#6

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.


#7

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


#8

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.)


#9

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


#10

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.


#11

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.


#12

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.


#13

I think OP needs dynamic - not static data.


#14

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/.


#15

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

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


#16

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.


#17

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