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

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Jan 21 - Read on Facebook

I had some fun with vector shapes today (Framer & Snap):
Inspired by the animations from Thomas Quarre and Ken Yiu, I wanted to do simple SVG stuff, but also create the SVG directly inside Framer. I am using snapsvg.io that lets me draw SVG shapes very easily.

All these use a handy workaround of a layer animating and then listening to change:x — that allows to use easings or even spring in the manipulation.

1) Circular Progress like google Fit: http://share.framerjs.com/195308v9yp1w/
This one actually draws an arc and is not using the dashArray workaround. There is no major advantage doing it this way.

2) Path animation: http://share.framerjs.com/i0q68bh9nop0/
This one creates an SVG path with coordinates directly from sketch (export vector as svg, open in text editor and paste coordinates from d attribute on path object). The animation is then done with dashArray

3) Move Framer Layer along Path: http://share.framerjs.com/mpj7ig3y1q19/
This one is a bit tricker, and requires a reference layer above the SVG layer with the same x and y coordinates than the canvas layer. The logo is a childlayer of that reference layer. Snap gives you the coordinates of any point along a path with getPointAtLength(length). These coordinates are then applied to layer.midX and layer.midY

I find this a bit cleaner and more versatile, once you know how to use SVG directly in framer/snap. Copy&Pasting complicated shapes from sketch is also super helpful.

Some of these things would be easier with Tisho's animation path API. but as far as drawing svgs (arcs, shapes, etc), Snap is super handy.

10 Comments

Johannes Eckert

btw, here's the sketch file (pages) with the vector shape: https://dl.dropboxusercontent.com/u/115270/Framer%20and%20Snap.sketch

When exporting a custom SVG shape, having it in an ardboard with the same width/size of the screen is helpful. Copy and paste the drawing commands to get this shape drawn by Snap for you. The coordinates will match your prototype when the artboard was the same size.

Ken Yiu

Nice Johannes Eckert, i think there will be more data visualization samples. Any one have tried d3.js in Framer?

Johannes Eckert

I like d3.js and use it in other projects. I feel d3 is "one step removed" to just draw svgs. If you really want data visualization, d3 is great, and you can combine that in an svg layer with framer, but d3 has it's own animation modules, svg manipulation and data analysis that doesn't necessarily works seamless with framer

Josh Max Rubinstein

Johannes Eckert Mind helping me out and explaining how to use Snap with a Framer project. I am getting an error in Framer Studio "Can't find variable: Snap"

Stephen Crowley

Your Framer Layer along a path gave me an idea, Johannes. Will you be able to join us for our Feb. meetup?

Stephen Crowley

#framercode

Johannes Eckert

Stephen Crowley Yes, I want to join back with the feb meetup

Johannes Eckert

Josh make sure you have snap.js included in the html — download one of the sample projects linked in the post. they should have snap.js working

Stephen Crowley

Awesome man, I might have a few questions for you about this.

Josh Max Rubinstein

Johannes Eckert Thanks I didn't think to look at the index.html file. I was overly focused on it being a module.

Read the entire post on Facebook