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

What is Framer? Join the Community
Return to index
Cyrus Cheng
Posted Mar 11 - Read on Facebook

Hi ,guys , i am newbie about codes,anyone can tell me how can i creat a circle or bezier curve in framer,i mean not import from sketch...any information can offer ,and thanks a lot...

6 Comments

Benjamin Den Boer

Hey Cyrus Cheng! You can turn layers into circles by using the borderRadius property: layerA.borderRadius = 50, like this: http://share.framerjs.com/ye8pcxf5iolm/

As for the bezier curves - are you looking to draw actual curves or to animate something with cubic-bezier animations?

Cyrus Cheng

thanks...and what if i want creat a irregularity curve?

Benjamin Den Boer

Hey Cyrus Cheng, you can use bezier-curves as the animation curve within, like this: http://share.framerjs.com/ij3a4vg7yllb/

This is also a nice reference to test the values and animations: http://cubic-bezier.com

Cyrus Cheng

thanks Benjamin Den Boer ,But i mean that creat a shape of bezier-curves ,not anmation with
bezier-curves ,in fact,i want control the anchor of the shape --bezier-curves, like a circle's single anchor move some distance, transformation the shape of bezier-curves...

Benjamin Den Boer

Hey Cyrus Cheng, ah, I see. You can't draw paths or animate along paths yet in Framer. One thing you might be interested in is Tisho's proposal for Path Animations within Framer: https://github.com/koenbok/Framer/pull/151. Another thing you could look into is PaperJS http://paperjs.org - a library which you could include within a Framer prototype.

Here's a simple little demo that used Paper in combination with Draggable layers: http://share.framerjs.com/2fzz87mdpvca/

Video: http://f.cl.ly/items/0c0I2o0k3r3P2c2z3Q3g/Path.mov

Cyrus Cheng

thanks very much,Benjamin Den Boer,that's what i want...

Read the entire post on Facebook