Squarespace Animations: How to Add Them and Which to Pick

To turn on Squarespace animations, open Site Styles by clicking the paintbrush icon in the top right of the editor, scroll to the bottom of the panel and open Miscellaneous, then choose Animations. Pick one of the five effects, set the speed, and hit Save. It applies to your whole site at once.

Where the Squarespace animations setting hides

This is the part that stumps people. Animations aren't in the page editor or the section settings, which is where everyone looks first. They live in Site Styles.

Click the paintbrush icon in the top right corner of the editor to open Site Styles. Scroll all the way to the bottom of the panel, or click straight into Miscellaneous. Animations is in there.

One thing worth knowing before you start: this is a sitewide setting. Whatever you pick applies to every page and every section at once. You can't animate one section differently through this panel, which is a good thing for consistency and occasionally frustrating if you wanted something bespoke.

The five animation styles, and which to use

Squarespace gives you five built-in options. Click through them and the page previews each one live as you scroll, so you can see the difference immediately.

Fade brings content in from transparent to solid. It's the safest choice and the one I use on most client sites, because it reads as polished without calling attention to itself.

Scale grows elements slightly as they enter. It has a bit more presence than Fade and works well on image-heavy pages.

Slide moves content in from the side. It's more noticeable, so it suits bolder brands and gets tiring on a long page.

Clip reveals content behind a moving mask. It's the most editorial-looking of the set and pairs nicely with big typography.

Flex is the most dramatic, with a stretch as elements arrive. Use it sparingly.

If you're unsure, pick Fade. Motion should make a site feel considered, not busy.

Adjusting the speed

Select Scale and you'll see an extra control appear for animation speed, with Slow, Medium and Fast.

Medium suits most sites. Slow can feel elegant on a portfolio or a luxury brand, but it also means visitors who scroll quickly will hit content that hasn't finished arriving yet, which reads as sluggish. Fast is nearly invisible, which is sometimes exactly what you want.

Scroll the page while you switch between them. The right speed depends on how long your sections are and how fast people move through them.

When you land on a combination you like, click Save. Nothing applies until you do.

Check it on mobile before you call it done

Refresh your site and scroll. The animation triggers as each section comes into view, on every page.

Then open it on your phone. Animations that feel subtle on a wide desktop screen can feel heavy on mobile, where sections fill the whole viewport and arrive one after another. If it feels like the page is fighting you, drop to Fade or speed it up.

Worth noting: visitors who've turned on reduced motion in their device settings won't see the animations at all, and that's correct behavior. Motion shouldn't be load-bearing, so make sure nothing important depends on it.

When the built-in options aren't enough

Five sitewide effects covers most sites. What it doesn't do is animate one element differently from the rest, stagger items as they appear, or trigger something on hover or click.

That's where custom code comes in, and it's a lot of what I do on client builds. Scroll-triggered sequences, staggered reveals and hover states all sit outside what the panel exposes. If you want a specific effect you've seen somewhere and can't find the setting for it, that's usually why.

Have a look at the portfolio for what that ends up looking like, or see code support if you want a particular interaction built.

Frequently asked questions

Can I use different animations on different pages in Squarespace?

Not through Site Styles. The animation setting is sitewide, so one effect applies everywhere. Per-page or per-section animation needs custom CSS.

Why can't I find the Animations option?

It's at the bottom of Site Styles under Miscellaneous, not in the page or section editor. If it still isn't there, you're likely on Squarespace 7.0 rather than 7.1, where the option sits in a different place depending on your template.

Do Squarespace animations slow down my site?

No. They're CSS-based and handled by the browser, so the performance cost is negligible. Large unoptimized images will slow a page far more than any animation setting.

Do animations hurt SEO?

No. The content is in the HTML whether or not it has animated in, so Google reads it normally. Just don't rely on motion to communicate anything important, since some visitors have reduced motion turned on.

Want motion that goes past the five presets, built properly and without slowing the site down? Book a free call and tell me what you have in mind.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.