How to add animations to Squarespace.

How to Add Animations in Squarespace

Want to make your site more dynamic and engaging? Squarespace lets you add simple animations to sections and elements for a polished, modern feel. Here’s how to enable them step by step:

1. Open the Page Editor

First, log into your Squarespace site and choose the page where you want animations. Click Edit at the top to enter editing mode for that page.

2. Enter Site Styles

In the top-right corner of the screen, click the paintbrush icon (as shown in the red box in your screenshot). This opens the Site Styles panel, where you control layout and design settings.

3. Scroll to Animation Settings

Once in Site Styles, scroll down or use the search bar to find "Animation" settings. You can choose how elements appear as users scroll, including effects like:

• Fade In

• Slide Up

• Zoom

• Scale

• None (to disable)

4. Apply Animations to Sections

Click directly on a section or block on your page to open style settings for that specific section. You’ll find animation options under the section layout tools.

For example:

• Apply a slide-up effect to a content block.

• Fade in text or images when scrolling into view.

5. Preview and Save

Once you've chosen your animations, click Save at the top-left to apply your changes. Use the live preview to scroll and test the effect before exiting the editor.