How to disable animations for individual images in Squarespace

By square on

In Squarespace, there isn't a built-in option to disable animations for individual images directly via the interface. However, you can accomplish this using custom CSS to target the specific section (disable the animation for all images of that section) or image (disable the animation for an individual image) and disable the animation effects.

In the Squarespace 7.1 fluid image you have to target the class .fluid-image-animation-wrapper of the section or individual image to do so. Here’s how you can do it:

Step-by-Step Guide

1. Identify the section or image block

Go to the page with the image you want to modify.
Right-click on the image and select Inspect (or use the browser's Developer Tools). This will open the HTML/CSS code for the page.
Look for the section or image's specific class or ID. For the section it will typically look like #sectionname, corresponding to the name you gave that section (Edit section > Anchor Link). For the image block it will typically look like #block-yui_X_XX_X_X_XXXXXXXXXXXXX_XXXXX having image-block as class.

2. Add Custom CSS

Once you have identified the image's class or ID, you can disable the animation by adding custom CSS. Go to your Squarespace site's Design panel, then click on Custom CSS.

Write the CSS Code

You need to target the section or image and override the animation property. Here's an example of how to disable the animation:

/* Disable animation for specific section */
#sectionname .fluid-image-animation-wrapper {
animation: none !important;
transition: none !important;
}

/* Disable animation for specific image */
#block-yui_X_XX_X_X_XXXXXXXXXXXXX_XXXXX .fluid-image-animation-wrapper{
animation: none !important;
transition: none !important;
}