How to Add Animations to Your Squarespace Website

One question I get asked surprisingly often as a Squarespace web designer is “can I add animations to my Squarespace website?”

And the answer is yes! In fact, you can natively add both site-wide animations and you can animate images. 

In this Squarespace tutorial, I’ll take you through both animation options.

Watch the video

Check out the YouTube video below 👇

How to Add Site-Wide Animations on Squarespace 

Within your main edit dashboard hit the paintbrush icon in the top right hand corner to head to Site Styles.

From the dropdown menu that appears, select Animations.

Here you’ll be presented with a list of animations that you can add to your website to animate site elements as they appear on the page.

The animations available are:

  • Fade

  • Scale

  • Slide

  • Clip

  • Flex

You can toggle on the animation you want to add to your Squarespace website and you’ll be able to see a preview of it in action too.

List of animation styles on Squarespace

Once you’ve found the one you want to use, toggle it on and hit, save and that’s how you animate a Squarespace website. 


📩 Join the inner circle to get exclusive code updates


How to Animate Squarespace Images

To animate an image on Squarespace, double click your image and head to the Design tab of the panel that appears.

Scroll down to Animation and you’ll be presented with loads of animations to choose from, far more options than what you have when adding site-wide animations. 

You can select an animation from the list, or select Site Default, which will set the animation to the one you’ve chosen for your site-wide transitions. 

Once you’re happy, hit save and you’ll have animated a Squarespace image. 

It’s worth noting that for some reason, you can only add animations to images in the classic editor. I’m not sure why, but you can’t animate images in Squarespace Fluid Engine. 

Animating a Squarespace website is a great way to make it more engaging for users, just don’t go too overboard with animations and make your website visitors dizzy from all the spinning! 


Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.


Want more?

Sam Crawford

This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.

Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.

https://bycrawford.com
Previous
Previous

Squarespace Courses New Styling Features Explained

Next
Next

How to Change Mobile Menu Font Size Squarespace