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

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Nov 08 - Read on Facebook

SVG Line Animation Example

UPDATED w/ Square & Rectangle:

Using the the new slider component... here's how to draw a line on a SVG path in framer.

Also, an example in how to proxy animation layer events through to your SVG path to draw the line.



Argiris Bendilas

Hi Jordan.

Should the same method be used if I wanted to create an oval that would take a square image “as a fill” (similar to what Sketch does)?

I’m trying to create a circular avatar by code.


Kevin Gutowski

Nice! Thanks Jordan!

Stephen Crowley


Fran Pérez

Amazing :)

Chris Camargo

:( Here's all I see.

Jordan Robert Dobson

Fixed Chris Camargo: Had to add a background:

Chris Camargo

oooooh, that's hot.

Max Schwartz

Blaine Billingsley

Jordan Robert Dobson

Anyone have any questions about this at all? I tried to make it pretty straightforward. :)

Ash Adamson

ohh wow!

Jordan Robert Dobson

Yeah you have to change the SVG code most likely too.

Jordan Robert Dobson

Jérémy Jones - I made a new rect in Illustrator so you can see the difference.

Jordan Robert Dobson

Here's the updated version:

Jordan Robert Dobson

Henrique Gusso wrote about a similar technique to this here...

Read the entire post on Facebook