Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Animations and image effects

You can add animations to a small area of your site, like a section background or an Image Block, or you can enable site-wide animations that appear as visitors scroll through your site. 

This guide reviews how to enable different animation effects across different areas of your site.

Tip: To add hover effects to your site, like image titles and captions, visit Creating hover effects for your images.

Before you begin

  • Animations on individual Image Blocks, Quote Blocks, and other areas override site-wide animations.
  • Some collection pages, like Blog Pages and Portfolio Pages, always have subtle animations when the page loads, even when site-wide animations are disabled. 
  • It's not possible to add animations in the Squarespace App. 
  • When you turn off block and page animations, those areas follow site-wide styles.

Site-wide animations

Site-wide animations are only available on version 7.1.

Site-wide animations apply to most areas of your site, with effects more noticeable in some areas than others. These animations primarily impact the way images, text, and other blocks appear as you scroll through a page. Some animations also appear when a visitor hovers over links and buttons. 

We recommend enabling an animation style, then seeing how it looks on different pages of your site. Experiment with each style until you find the one that works best for your content.

To animate site content: 

  1. While editing a page, open Site Styles, then click Animations.
  2. Click an animation style.
  3. Choose a Slow, Medium, or Fast animation speed.
  4. Hover over Done and click Save

Animation styles

Choose from these animation styles:

  • None - Disables site-wide animations.
  • Fade - Content fades in as it comes into view on the page.
  • Scale - Content animates from a smaller size to its final size, creating a zoom effect.
  • Slide - Content slides upward into place, accentuating the effect of scrolling down the page.
  • Clip - Content slides in line by line from the left. 
  • Flex - Adds unique animations to headings, linked text, buttons, and Portfolio Pages. 

Remove site-wide animations

To disable site-wide animations:

  1. While editing a page, click the paintbrush icon, then click Animations.
  2. Choose None.
  3. Hover over Done and click Save.

Watch a video

Background animations

You can animate your site's background with image effects or a looping video, depending on your site's version.

Image effects

Background image effects are only available on version 7.1.

If your page section uses a background image, you can add image effects to give the background a more stylized look. Some effects add an animation so the image is always moving, while others only appear as the visitor scrolls through that section of your site.

To add an image effect:

  1. After adding a section background, in the section editor, click Background.
  2. Scroll down to Image Effect and choose an effect from the drop-down menu. The effect will appear on your site preview.
  3. Hover over Done and click Save.

Keep in mind:

  • Image effects only appear on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test whether your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background will remain static.
  • Image effects don't appear over background videos.

Background videos

You can add background videos to page sections, banners, and other areas depending on your site's version

  • Background videos play on a loop without sound.
  • To add a background video, you'll need a YouTube or Vimeo URL. It isn't possible to upload a video directly to Squarespace. 

To learn more, visit Adding background videos

Block animations

You can add animations to Image Blocks and Quote Blocks that visitors see when they load or refresh the page.

Image Blocks

To animate an Image Block:

  1. In the Image Block editor, click Design, then click Animations.
  2. Select an effect from the list to apply to the image and any text. As you select an option, you’ll see a preview of it on the page.
  3. To animate the image and text separately, select Custom, then select options for Image and Text.

Choose from these animation options for your image, text, or both:

  • Fade In - Block, image, or text fades in
  • Slide Up - Block, image, or text slides upward
  • Slide Down - Image or text slides downward
  • Horizontal Clip - Block or image loads in horizontal layers
  • Vertical Clip - Block or image loads in vertical layers
  • Tilt Up - Block or image zooms in with an upward tilt
  • Tilt Down - Block or image zooms in with a downward tilt
  • Focus In - Block, image, or text looks blurry, then comes into focus
  • Collide - Image and text slide inward from the sides
  • Reveal - Image and text slide outward from the center
  • Slide from Left - Image or text slides in from the left
  • Slide from Right - Image or text slides in from the right

Quote Blocks

To animate a Quote Block:

  1. Click the Design tab in the block editor.
  2. Select an effect from the drop-down menu. As you explore options, you'll see previews of how they load.

Choose from:

  • Fade In - Text fades in
  • Slide Up - Text slides up from below
  • Focus In - Text looks blurry, then comes into focus
  • Reveal - Text slides outward from the center

Troubleshooting

If animations aren't appearing on your site, keep in mind: 

  • Site-wide animations and section backgrounds are only available on version 7.1.
  • Some content only supports the Fade site-wide animation style. If you choose a different style, content that doesn't support it will fade instead.
  • If none of your content is animating, ensure you're using a supported browser.
Was this article helpful?
27 out of 53 found this helpful
Animations and image effects