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 👇
Want a framework for designing the perfect homepage?
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!
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
