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!
Something like this: https://dl.dropboxusercontent.com/u/7997357/framer/marc/FlipCard.framer/index.html ?
If so, you can download it here:https://dl.dropboxusercontent.com/u/7997357/framer/marc/FlipCard.framer/FlipCard.zip
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.
This is what I mean: http://benzai.nl/prototypes/bingo-test/
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).
Hi Marc Krenn it would be greatly appreciated. Feel free to check the Framer project here: http://cl.ly/3V1o1b1m0u2w
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?!
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.
Yeah, it's weird. Keep us updated!