If you click on me, I will disappear.

Click me away!

Click me too!


montana mclean

— identity


— creative direction


— résumé


— about


Snap.svg and Squarespace

After reading every article in the first two pages of a "how to animate with snap.svg" google search, I've finally had that lightbulb moment on how to integrate the sweet javascript library "Snap.svg" with Squarespace. Some say Squarespace is not for developers. Well, I am not a developer and this does not require enablement of "Developer Mode." I'm a designer and I like pretty things. Code scares me but if the end result is pretty, it's worth the time.

what is snap?

Aside from a hand gesture that implies a quick occurrence, the Snap Javascript library wraps all of the functionality of the SVG technology. Snap allows us to create resolution-independent animated or static vector graphics. 

1. inject javascript code into sitewide header

Navigate to "Advanced" >> "Code Injection" >> copy and paste the following to the Header Code:

<script src="/s/snapsvg-min.js"></script>

2. download snap.svg here. 

Unzip the file, you will see a lot of other files and folders. Go back to Squarespace.

3. create a new squarespace page labeled "snapresources" 

On this page, type out "Snap Code" and hyperlink it. In the hyperlink options select the "Files" option >> "Add new file" >> The only one that is important at least for this project is the "dist" folder. I know, it's wildly unassuming!!! The "dis" folder contains the build "distribution" files. Within the dist folder, upload the file labeled "snapsvg-min.js".


4. wait 24 hours whilst squarespace adds the snap javascript library to your site.

Do not let the anticipation kill you.