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 Mar 31 - Read on Facebook

SVG Line Animation Example

UPDATED w/ Square & Rectangle: http://share.framerjs.com/udsc7ywtdx9l/

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.

SQUARE ONLY: http://share.framerjs.com/izae13wmqd50/

13 Comments

Kevin Gutowski

Nice! Thanks Jordan!

Stephen Crowley

Yoink!

Fran Pérez

Amazing :)

Chris Camargo

:( Here's all I see.

Jordan Robert Dobson

Fixed Chris Camargo: Had to add a background: http://share.framerjs.com/izae13wmqd50/

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: http://share.framerjs.com/udsc7ywtdx9l/

Jordan Robert Dobson

Henrique Gusso wrote about a similar technique to this here... https://medium.com/@gusso/draw-and-animate-an-svg-circle-in-framer-d4bc3a9863c1

Read the entire post on Facebook