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?
This article was written by Sam Crawford, one of the world’s leading Squarespace website designers.
Sam is an official Squarespace Expert, official Squarespace Partner, official Squarespace Community Leader, official Squarespace blog contributor, official Squarespace panelist, Squarespace educator and multi-award winning Squarespace designer.