Jump to content

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

Go to solution Solved by Spark-Plugin,

Recommended Posts

Posted (edited)

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

 

Screenshot2024-09-21at14_11_41.thumb.png.3bfac47a32d765b5e0331714b4bd9b4f.png

Edited by abc
  • Solution
Posted (edited)

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!

Edited by Spark-Plugin

- Answered by Iuno from sparkplugin.com

forumsignature-recommendedcopy2.png.0579645eb1430dc7c1059541dc6456c6.png

Posted
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?

Posted

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.

- Answered by Iuno from sparkplugin.com

forumsignature-recommendedcopy2.png.0579645eb1430dc7c1059541dc6456c6.png

Posted
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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.