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.