How to Add Site-Wide Animations to Your Squarespace Website

It’s such a small thing, but adding an animation to your Squarespace website will massively improve the way your audience perceives your site. It’s those small details that really stand out to your users, and I will show you how to do this for yourself in this article.

Watch The YouTube Video

I have made a video version on my YouTube channel, so ensure to check it out and let me know what you think.

Adding Site-Wide Animations To Your Squarespace Website

Step 1: Navigate To Site Styles

1. Navigate to the Squarespace editor.

2. Select Edit in the top-left.

3. Select Site-Styles in the top right of the editor.

Step 2: Find The Animations Settings

1. At the bottom of Site Styles, you will find Miscellaneous.

2. Inside this section, you will find Animations. Select this to open the animation settings.

Step 3: Choose Your Favorite Style

1. There are 5 animation styles in total:

   • Fade

   • Scale

   • Slide

   • Clip

   • Flex

   Select one of these.

Step 4: Slow, Medium or Fast

1. You can select your speed by pressing Slow, Normal, or Fast.

2. Test which one works best for your Squarespace website.

Consider The Following

• Animations are a great way to stand out, but too many elements like animations and large files can slow your website down.

• Some elements may not be affected by the site-wide effect, so some custom CSS may be required.

• If you only want to make one element animate, some custom CSS may be required.

Any Questions?

My name is Jacob, your expert Squarespace designer. I have helped hundreds of businesses in multiple industries. If you have any questions after reading this article, be sure to contact me through WhatsApp.

If you would like to discuss a potential design project, you can email me at jacobchivers@chiverscrafted.co.uk or contact me here. Thanks for reading!