This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
William Hutter
Posted Mar 06 - Read on Facebook

Hey guys,
does anyone has a good example on how to make a card flip in 3d (if possible with spring curves) ?
Thanks !

9 Comments

Koen Bok

This shouldn't be too hard. Here are some pointers:

- Create a wrapperView
- Add two subviews (frontView, backView) with the same x, y, w, h
- RotateX the backView 180
- Play with css properties backside visibility and perspective
- RotateX the wrapperView 180

These should get you started, sorry I don't have the time to make a full example today :-/

Koen Bok

Studying this might help too: http://codepen.io/ace/pen/sALei

William Hutter

thanks Koen ! I did manage to make something work, thanks to your examples. But when I add a spring curve it "shifts" the 2 cards and you can clearly see they're not in sync.. Anyway I'll give another try today

Koen Bok

That's why I suggested to put them both in a wrapper and animate that instead :-)

William Hutter

ok got it ! Thanks again :)

Koen Bok

If you got some time it would be great if you could share how you did it. Others have been asking for this too.

Gary Jacobs

I'd been keen to see it in action

William Hutter

sure! I'll build a little pen with what I figured out later today

William Hutter

I'm not super talented in javascript but managed to build this (it's buggy): http://codepen.io/trenkwill/full/hBetm
And I wasn't able to make it work with the wrapper for some reason

Read the entire post on Facebook