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

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

inspired by the recent conversations about the circle/arc animations, I wanted to create SVG paths in framer directly, with the help of SnapSVG.

I hook snap into a variable by calling the svg element with s = Snap("#svg"). Unfortunately, any other command on s, like s.circle(...) does fail with "null is not an object". It works fine when doing this manually in the browser's console.

Is this is a scoping issue? Is this a compatibility issue with Snap and Framer?

http://share.framerjs.com/a2q785b51e7j/
Some easy snap examples: http://snapsvg.io/start/

6 Comments

Johannes Eckert

btw, Utils.domLoadScriptSync seems to be deprecated in Chrome /cc Koen Bok

Koen Bok

It is not allowed on local files for security reasons. So it only works if you run it from a server.

Johannes Eckert

this error in Chrome 42 looks different, as if they decided synchronous loading being a bad user experience they want to avoid. do you want me to open a report on github?

http://share.framerjs.com/9yr2z1jo1dcx/

Any idea on my original problem?

Koen Bok

Ah yeah I see. You need to do it async from now on, Utils.domLoadScript().

Koen Bok

You almost had it, but because the Layer is inserted async you did not get the element back with the selector.

Instead, you can use querySelector on layer: http://share.framerjs.com/if32z4id2j3s/

Johannes Eckert

nice! I was thinking about that this morning and just wrapped my code inside a Utils.delay, but of course that's wrong. I also just found the place in the documentation that deals with this, in layer.html. Very well documented!

Thank you

Read the entire post on Facebook