Squarespace Style Guide: How to Apply Animations to Just One Page

We love adding animations to Squarespace websites over here, but what if you only want to apply them to a single page, not the whole site? Is there a way?

Spoiler: there is! And I’m going to show you exactly how to do it.

Watch the video

Check out the YouTube video below 👇

Firstly, ensure you have the Google Chrome Squarespace ID Finder plugin installed and on your Squarespace website head to Site Styles > Animations and turn on the animation you want to use.

Next, navigate to Website > Website Tools > Custom CSS and add the following code to the custom CSS box:

body:not(#collection-ID) {

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

}

You then need to use your Squarespace ID Finder plugin to add the collection ID of the page you want to keep your animations on. Replace the ‘Collection-ID’ part of the above code and you’re good to go.

This custom code will tell Squarespace to not display the animations on every page apart from the one you want to target aka the collection ID you’ve wrapped the code in.

Hit save and you’re all done!

---

📩 Join the inner circle to get exclusive code updates

---

Super simple and super handy to have up your sleeve should you or a client want to remove animations from all but one Squarespace page.

---

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?