Is it possible to enable Animations only for one specific page instead of site-wide?

I would like to enable Animations only for one specific page. Is it possible? Thank you.

1 hour ago, Spark-Plugin said:

Hello, @abc.

I imagine you're having an awesome day! I'll be helping you out with your question. Yes, it’s definitely possible to enable animation for just one page. Although it’s not recommended, as it might cause issues on certain devices, here’s how you can do it:

1. Make sure animations are enabled across your site.

2. Go to Squarespace ID Finder and install it on your browser.

3. Navigate to the page where you want to enable animations, and enter edit mode.

4. Turn on the Squarespace ID Finder extension.

5. Look for the Collection ID at the top of the page. Click it, and it will automatically copy the ID.

6. Now, navigate to Pages > Website Tools > Custom CSS.

7. Paste the code below into the CSS editor.

8. Replace the (#Collection-ID) part of the code with the ID you copied, hit Save and you're all set!

This custom code will make sure animations only appear on the targeted page with the Collection ID, and not across your whole site. You can also add more Collection IDs by simply separating them with a comma.

body:not(#collection-66f138068b7b8a554cc76cae) * {

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

}

Let me know if that works, thank you!

I appreciate your detailed reply, but I'd rather not use transition: unset since it disables all transitions on a page, and I use a lot of them. Is there a way to disable ONLY the Squarespace loading animations shown in the screenshot of my original post?

Hi again @abc.

As far as I know, disabling just the Squarespace loading animations would likely require using JavaScript, not just CSS. This question has come up plenty of times on the Squarespace forum, and the typical solution is a CSS approach similar to the one I shared with transition: unset.

At this point, I’d recommend hiring a developer or scheduling a consultation with one to see if it's possible and to ensure it won’t cause any issues on your website.

On 9/24/2024 at 2:32 AM, Spark-Plugin said:

Hi again @abc.

 

As far as I know, disabling just the Squarespace loading animations would likely require using JavaScript, not just CSS. This question has come up plenty of times on the Squarespace forum, and the typical solution is a CSS approach similar to the one I shared with transition: unset.

At this point, I’d recommend hiring a developer or scheduling a consultation with one to see if it's possible and to ensure it won’t cause any issues on your website.

I understand. Thank you. Also, I've marked your original reply as solution anyway since it CAN work in certain cases. As for me, I'll just have to wait for Squarespace to allow us to enable animations on a per-page basis.

You’re welcome, @abc. Thank you and have great day.