3D Transform Cardflip Animation not quite working

Design help General
1

Hi,

I have got the card flip animation to work on hover, however, when it first loads in and does a full 360 flip, it doesn’t show the back of the card, it just shows the front in the reverse direction.

Any ideas where I’m going wrong?

https://preview.webflow.com/preview/3dtransforms?preview=18ac9c2746f92e4d07f10bffa6e0bf9c

Thanks in advance for any help.

Here is my public share link: LINK
(how to access public share link)

2

Example is for card 2… repeat other cards

Combine Hover and Scroll interaction into 1.
Remove the Initial Appearance.
Add a Load step into the interaction.
On load - flip card 180 then flip back. Make it a little prettier with a delay.

See video
http://quick.as/3xbVToebl

1 Like
3

Brilliant, that’s done the trick! Thanks for this, the video was a nice touch and made it so easy to follow.

4

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