Using FramerJS and SVG to create android unlock screen

Since I first time saw FramerJS and started working in it, I wanted to recreate android unlock screen with graphic key

Doing this prototype will be excellent example on the question why designers should use FramerJS to prototype interactions and not any other tool. It uses not the timelined animation, it uses the complex interaction between elements, it uses custom gestures like Pan.

So I started from the very beginning - I need an ability to draw line between two dots, which appeared to be complex task in Framer). In Framer you can create layers that can be rectangular shape or circles (using border radius). But there are no inline tools or functions to create something simple like line, or complex stuff like curved path or any other shape.

So I went asking around on slack group (great people here, highly recommending signup there for real-time help).

On that stage, I got an example with drawing on stage with pointer events module (thumbs up to Jordan Robert Dobson - he rocks!) and using SVG.

http://share.framerjs.com/pw5l5et3nne1/

So I understood — I need to dig deeper in SVG direction, which was good and bad thing. Bad - I knew nothing about using SVG in html, good - I will learn something new when having fun in Framer. Actually one of the biggest reasons to start using Framer - you learn a lot while having fun).

So I just went and googled the reference of using SVG to get started. Basically SVG - is type of html element that can contain drawn rectangle, circle, ellipse, line, polygon, path, text and image and you can use filters and animation on it.

SVG reference

Then I got into this post on Framer Facebook group (also recommend to join it, if u haven’t done it already) and realised it's exactly what i need - animation and some lines)

https://www.facebook.com/groups/framerjs/permalink/677551062371968/

So I digged into the sample code provided and found out I that Framer can work with snapsvg.io - library that support different sort of SVG animation and manipulation.

(best way to learn framer - dig into someone else examples, read documentation and ask, ask people a lot, framer community is very cool, people always want to help you when you are stuck). In order to use snapsvg library you need to download snap.svg-min.js and include it in index.html of your framer project like this

<script src=”js/snap.svg-min.js”></script>

Next step - try to create basic SVG object - I just copied code from the sample provided by

Johannes Eckert

And tried to modify it such way - i click the button and svg path is animated from one poly element to other

http://share.framerjs.com/g8xnqgbs1kmx/

object = snap.path(“M592.826683,342.697155 L157.173317,342.697155 L237.550258,496.600106 L421.20851,52.0107422 L430.144507,697.989258 L592.826683,342.697155 Z”)
object.animate({ d:”M592.826683,642.697155 L157.173317,342.697155 L237.550258,496.600106 L421.20851,52.0107422 L430.144507,197.989258 L592.826683,342.697155 Z”},1000,mina.bounce)

With this kind of code we are just animating svg from one state to the other, with timing 1000 ms and bounce curve

Next step - ability to draw poly line by line.

http://share.framerjs.com/qpr0so0i4gw4/

Next step - I need to understand how I can draw a line from defined point on the screen - to point on which I point with finger or mouse. Thats the moment when Jordan’s pointer module becomes handy

http://share.framerjs.com/8ankoap0d6hn/

Seems like it) I can move to next thing creating unlock screen.

If you want just play around in Framer recreating existing app behaviour, but don’t want to spend lots of time sitting in sketch - I recommend checking http://www.sketchappsources.com . For my particular example I needed android unlock screen, so i found it here http://www.sketchappsources.com/free-source/1905-android-m-ui-kit-sketch-app-freebie-resource.html

I modified sketch file a little, so it contains all the graphics and texts I need for my prototype in one screen. (Nice trick from framerbook.com - use * at the end of sketch layer group name , if you want to flatten the group).

After import, I have something like this in Framer Studio. I also attached Jordan’s pointer module and made all sketch layers global for better accessibility.

http://share.framerjs.com/epkhcw9uqpqi/

Adding dots with 2 level cycle

http://share.framerjs.com/chrbshzq803v/

Creating function to trigger the start of the first dot of SVG element on one of 9 dots click event. Area on touch move is used to draw line from first clicked dot to pointer position

http://share.framerjs.com/di7uqfxinxez/

Adding condition - if our pointer is near the inactive dot - we are making this dot active, updating our svg element with new constant point and continue drawing new line from the last activated dot to pointer position

http://share.framerjs.com/rd4zp8aze8cz/

Next step - on touch end event - we are doing checks - whether our graphic pattern matched saved pattern - if yes, we are animating to home screen, if not - we are showing error state for pattern, and after delay - going back to zero state of things

http://share.framerjs.com/rsny9btiksed/

At the very end, we are adding some initial stage for prototype when dots are hidden and we need to pan from bottom to top to switch to unlock screen, using utility modulate.

More on Modulate in my previous article -

Introduction in FramerStudio Utils Modulate

So final prototype with annotated code here

http://share.framerjs.com/bjxygqx27ayb/

Hope you find this tutorial useful, you can find me on dribbble.com/mamezito or twitter.com/mamezito. Any feedback is appreciated.

More on Framer and SVG

Working with SVG Paths in Framer