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

What is Framer? Join the Community
Return to index
Benny Chew
Posted Aug 03 - Read on Facebook

Any ideas how to create a card flip animation in Framer? I’ve tried rotationY but this resulted in a rather (lame) non 3D look. I’m looking to create something like this: http://jpinghu.com/flipcardjs Thanks!

8 Comments

Benny Chew

Thanks a lot for this! Great example. Should be in the Framer examples imo. :) I've tried something like this, but in my case I've imported the 'card' with Sketch. But I don't see the 3D effect if you know what I mean. Perhaps clipping... Any idea how to resolve this? I've tried to disable the clipping of the parent layer with no luck.

Benny Chew
Marc Krenn

Hi Benny, just upload your framer file (/assets) and I'll look into it.

BTW: If clipping occurs, you can try to bring the element you're trying to flip a little bit closer to the user/observer, using the z-property (e.g. "tile.z = 20" ... the higher the number, the closer it is to the observer).

Benny Chew

Hi Marc Krenn it would be greatly appreciated. Feel free to check the Framer project here: http://cl.ly/3V1o1b1m0u2w

Marc Krenn

Well, to be honest, I've no idea what's wrong here.

At first I thought it works and appears as expected. I was pretty sure the lack of depth was just result of the small scale and positioning of the tile's layer.

However, when scaling it up, I still couldn't see a more pronounced depth-effect. I've tried to fix some potential clipping, changed the webkit.perspective and even updated your framer-files (just to make sure they are up-to-date) but unfortunately nothing helped :(

I'm sorry, I'm just a beginner myself - maybe some of the pros can help you out here?!

Benny Chew

Thanks for checking it out Marc Krenn! Confusing isn't it... Perhaps it is just a technical limitation or bug. I will try to create a native layer and add an image to it.

Marc Krenn

Yeah, it's weird. Keep us updated!

Read the entire post on Facebook