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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Jan 10 - Read on Facebook

Here’s a low-fidelity example of SVG stroke animation using the dashOffset and dashArray properties in Framer v108. Hope it helps. 💫

https://framer.cloud/QLDMO

6 Comments

Adam Mazurick

Amazing. So no modules? Just framer? This looks really close to the AE trim paths effect...

Denis Lesak

Thanks Benjamin Den Boer. I am trying to replicate this immediately following a loading animation. In this case, press button, loading animation and then a line drawing of a circle followed by a checkmark. It is currently saying that svg = shape.svg is not an object. Not sure what I'm doing wrong - https://framer.cloud/eYXqQ

Denis Lesak

Any help you can offer is appreciated.

Denis Lesak

I just isolated the circle and checkmark and am running into trouble with svg.setAttribute which says "is not an object"

Benjamin Den Boer

Hi Denis Lesak—I see. You are referencing the Frame (so, a DIV), not the SVG Path element directly. You can easily fix by passing along your "circlePath" path instead of the "circle" layer. :-)

Read the entire post on Facebook