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

What is Framer? Join the Community
Return to index
Lut Ze
Posted Apr 22 - Read on Facebook

Is it possible to draw simple lines with framer.js? I need to recreate the android pattern unlock screen...

11 Comments

Andy Jakubowski

Perhaps you could achieve that effect by resizing rectangular layers + rotating them?

Svet Denkov

What about using a rectangle of height 1px and pass a different color for each line using css?

Svet Denkov

To explain: on swipe/drag, fade in the line, or another approach is to pull it gradually (move the layer on x, y, or x+y axes) as a separate layer. Also you could try to add an iFrame pointing to custom CSS/HTML/JS that would allow you to do the drawing dynamically: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple Keep in mind these are 10k view ideas that just occured to me :)

Marcelo Eduardo Oliveira

Hi, I use the approach Svet Denkov described. It works, even when a little crazy. you can check on this: hover the balls, and several "lines" come out of it. They are all divs with variable height and 2px width, rotated as needed.

http://www.marceloeduardo.com/framerfirefox/

Svet Denkov

Neat Marcelo Eduardo Oliveira! I bet you are using an auxiliary function which on hover randomly creates the "lines" layers and sizes everything accordingly!

Marcelo Eduardo Oliveira

Sure ! you're correct! here's the 2-part code:
1. http://www.marceloeduardo.com/framerfirefox/js/app.coffee search for lines: you will find the loop that creates 20 of them, then I just reuse in every mouseover.

Here's the mouseover routine:
https://www.dropbox.com/s/uiix1j636jfkcdb/Screenshot%202015-02-09%2015.57.11.png?dl=0

Svet Denkov

Thanks for sharing with the community :)!

Marcelo Eduardo Oliveira

If it helps, I am glad! I also learn a lot, so it's my way of saying thank you!

Kevin Cannon

Not natively. I wrote some code how to straight lines in any directions. You'd need to work on it, but it's a good starting point. You can see it here.
http://share.framerjs.com/3tj9buwqfbc5/

Lut Ze

nice, thanks guys! that will work for me.

Sergey Voronov

hey, did u managed to recreate unlock screen? want to try to do is as excersize)

Read the entire post on Facebook