Flip Card Animation issue in Grid

Hello! :wave:

I have a problem with a flip card animation on my website, I had originally configured it to have only 3 columns, but I decided to put 6 columns on the same line. I have the impression that because of the hidden side of the card, the whole thing is sticking out of the container so I don’t know what to do. I have a little trouble explaining the problem, the easiest way would be to look directly on my website (on the home page at the bottom).

Thank you for your help!
Jade

In your request title you requesting help to turn website upside down. Can you be more specific and describe what animation on your page is turning website for 180 deg ?

Done ! I hope it is more understandable now :blush:

hi @JadeH first thank you to use descriptive title for request instead of book chapter like so forum members will be able to find it when will face similar issues.

Now to your request. Your structure is too complicated and there are some conceptual mistakes. Because fixing your element was to time consuming I have decided to create for you an example from scratch.

Here is video with description

and here is example to study

hope this will solve your issue

Have a great weekend

Hi Stan!

Thank you very much for the time you spent on these explanations. It was very complete, and indeed your way of doing things is really simpler! :sweat_smile:
Unfortunately I was very careful to put the back side hidden but it doesn’t work, I still can see the back side… I don’t know how to do it, do you have any idea of what I might have missed?

→ my read-only link

hi @JadeH sorry for the misleading information the Backface hidden should be applied on front and back just change the setting on the front and reset it on the outer container. It should work I hope.

Hey @Stan
Outer and Inner are now defined as visible and the front and back as hidden, but this does not change anything. Did I misunderstand?
→ my read-only link

hi @JadeH I do not see any issue

here is my example live https://flipcards-5144f7.webflow.io/ but I can’t check yours as is not published.

@Stan, what kind of glitch is this ahah ?
I can’t upload a video but nothing has changed on my side, I don’t see the same thing as you! I assume that once published the animation will be well done then?

hi @JadeH Publishing should not have any impact on it.

I have now checked the animation in major browsers and it seems that issue has only Firefox, so change the backside visibility on inner and it should solve this issue.

I do not understand if it is a bug of the site or… But there is a real dissonance between my published site and my preview

→ Screenshot

It is not a bug please check previous note about Firefox to see if this solve your issue.

Unfortunately it didn’t change anything :frowning_face:
Moreover I am currently on safari. Do you think I should try on chrome?

I can’t help further @JadeH. I have provided a complete solution that works in all browsers, the rest is on you.

Hi @JadeH I can see that the flip card animation works as expected, so feel free to close your request as solved.

Hey @Stan,
Many thanks for your time and explanations :smiling_face: