How to add an animated SVG to Squarespace

Step 1 - Prepare The Artwork For Export

Hide the temporary background rectangle so the final file exports with transparency. With the artwork ready, click the SVGator icon to open the file drop-down and access the export panel.

Step 2 - Adjust The Export Settings

In the export menu, choose the file type, animation format, trigger behavior, and quality. The first animation will start on mouse click and repeat until clicked again. Refresh the preview to check all changes before exporting.

Step 3 - Export And Test The File

Export the file, then double-click or drag it into a browser window to view it. Pressing F12 lets you watch the SVG code in action. Right-click the SVG, choose View Page Source, select everything, and copy the code.

Step 4 - Embed The SVG In Squarespace

In the Squarespace editor, paste the code into a code block. The image aligns to the top line, where it says safe preview, which can make alignment tricky. After saving the page, open it in a browser window to test the animation.

Step 5 - Create A Reverse When Clicked Version

For the second animation, repeat the same process but set it to reverse when clicked.

Step 6 - Create An On-Load Version

For the third animation, change the trigger to On load so it plays as soon as the window opens.

Step 7 - Create A Faster Hover Version

For the fourth animation, increase the speed to 187% and set the trigger to On mouse over, then export and test.

Step 8 - Create A Programmatic Version

For the fifth animation, switch the type to Programmatic, set the trigger to On load, and reduce the frame rate to 12.

Step 9 - Create An On-Scroll Version

For the final animation, change the type to JavaScript and set the trigger to On scroll into view, with the start point at 38 percent visibility. Export it, apply a different layout, and scroll the page to test the effect.

This technique can be extended to other illustrations, allowing you to replicate the process.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!

How To Animate The Gooey Effect | SVGator Tutorial

Learn how to animate the gooey effect in SVGator! This tutorial will help you out, watch the video and follow the required steps.

SVGator