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

What is Framer? Join the Community
Return to index
Minh Thang Pham
Posted Mar 29 - Read on Facebook

Hi, how would you animate a layer in a perspective? Something similar like in this example: http://lab.aqro.be/fb_btn_concept.html. Thanks for the help!

10 Comments

Marc Krenn

If the thickness of the FaceBook-flap is important to you, youshould probably look into a fully fledged 3D engine like http://threejs.org/

If a paperthin-flap is acceptable for you as well, try something like this:

flap = new layer originY:0 # 0-1 sets the rotation axis to the top or bottom of the layer

flap.on Events.TouchStart, ->
_____flap.animate
__________properties:
_______________rotateX: 45
__________curve: "spring(500,12,0)"

Minh Thang Pham

Hi, thanks for the answer. I have tried you code, but it seems that it doesn`t work properly. Am I doing something wrong? http://share.framerjs.com/binxw46lq53a/

Marc Krenn

"rotateX: 45" should be "rotationX: 45". Sorry.

Minh Thang Pham

Now it changes only its height: http://share.framerjs.com/praczd4oo4y7/. It`s not animated in the perspective. Again, thanks for the answer.

Jonas Treub

You need to set perspective on the layer itself or the superlayer.
new Layer
perspective: 800
rotationX: 30

Marc Krenn

http://share.framerjs.com/hr9xggrfcug3/

Perspective set on the layer itself doesn't seem to work.

Jordano Moscoso

Does anybody know how to change image position inside an layer?

Jonas Treub

You are right Marc. The perspective needs to be set on the superLayer. You probably want to set clip to false on this superLayer so the rotated layer will be fully visible.

Marc Krenn

@Jordano, create a new (smaller) "imagelayer", change its image to your liking (image = "link") and make it a sublayer of the (bigger) "containerlayer" (imagelayer.superLayer = containerlayer)

After that, you can center the imagelayer with imagelayer.center() and/or move it around manually with imagelayer.x and imagelayer.y

Jordano Moscoso

You are right, thanks man. I have to say that framerjs is awesome.

Read the entire post on Facebook