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

What is Framer? Join the Community
Return to index
Jacob Zeng
Posted Nov 23 - Read on Facebook

Card flipping effect by manipulating rotationY in framer is quite "fake". I really want the card to look like a real 3D object, like in this case: http://codepen.io/akolchenko/pen/vJdtx

However after I paste the code into my framer, the flipping effect gets very dull again. Is there any setting I missed?

here comes the code:

ayer = new Layer ({width: 400, height: 200, backgroundColor: 'blue'})
layer.image = "http://jpinghu.com/content/flipcard/images/stanford_400X200.png"
layer.center()

layer.states.add({
flip: {rotationY: 180}
})

layer.states.animationOptions = {
time: 0.5,
curve: "bezier-curve",
curveOptions: "ease-in"
}

layer.on Events.Click, ->
layer.states.next()

layer = new Layer ({width: 400, height: 200, backgroundColor: 'blue'})
layer.image = "http://jpinghu.com/content/flipcard/images/stanford_400X200.png"
layer.center()

layer.states.add({
flip: {rotationY: 180, opacity: 0.5}
})

layer.states.animationOptions = {
time: 0.5,
curve: "bezier-curve",
curveOptions: "ease-in"
}

layer.on Events.Click, ->
layer.states.next()

3 Comments

Tisho Georgiev

The problem is that in Framer Studio, the perspective property of the element that contains your layer isn't really set. This makes all 3D transforms appear "flat". To get around this, put your layer in a container element that you've created yourself, and set its perspective property manually. Put this at the top of your file:

container = new Layer(width: Framer.Device.content.width, height: Framer.Device.content.height, perspective: 1000)

Then change your new layer definition to include "superLayer: container" at the end. Then your transformation should work as expected.

Jacob Zeng

It worked! Thank you!

Koen Bok

I disabled perspective by default because it caused retina drawing issues for a while.

Read the entire post on Facebook