Removing animation style from one image only

Squarespace has multiple different animation styles that you can apply to elements including images and text. 

Usually when you add an animation to your website, it will apply to every element on the site but sometimes, you may not want that.

Sometimes, you may have a specific element or image that you don’t want to apply the animation too. 

If that’s the case then you’ll need to use some custom code to remove the animation from one image whilst keeping it for the rest of your website.

Watch the video

Check out the YouTube video below 👇

How to remove animation from one image only

To remove an animation style from an individual image, head to your Custom CSS panel and firstly find the block ID of the image you want to target using your Squarespace ID Finder chrome extension. 

Paste your block ID into your Custom CSS panel and then add the following code:

#BLOCK-ID * {

transform: unset !important;
transition: unset !important;
transition-delay: unset !important;

}

---

📩 Join the inner circle to get exclusive code updates

---

This code will tell Squarespace to not apply the animation style to the targeted block but will allow you to keep the animation style on the rest of the elements on your website.

Super simple and effective. You just need a few lines of code and you can remove animation styles from specific elements. 

If you enjoyed this article then be sure to check out my full suite of Squarespace resources.

---

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?