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...


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: 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.

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. 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:

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.

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