abc Posted September 21 Posted September 21 (edited) I would like to enable Animations only for one specific page. Is it possible? Thank you. Edited September 21 by abc
Solution Spark-Plugin Posted September 23 Solution Posted September 23 (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: Make sure animations are enabled across your site. Go to Squarespace ID Finder and install it on your browser. Navigate to the page where you want to enable animations, and enter edit mode. Turn on the Squarespace ID Finder extension. Look for the Collection ID at the top of the page. Click it, and it will automatically copy the ID. Now, navigate to Pages > Website Tools > Custom CSS. Paste the code below into the CSS editor. 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 September 23 by Spark-Plugin abc 1 - Answered by Iuno from sparkplugin.com
abc Posted September 23 Author Posted September 23 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: Make sure animations are enabled across your site. Go to Squarespace ID Finder and install it on your browser. Navigate to the page where you want to enable animations, and enter edit mode. Turn on the Squarespace ID Finder extension. Look for the Collection ID at the top of the page. Click it, and it will automatically copy the ID. Now, navigate to Pages > Website Tools > Custom CSS. Paste the code below into the CSS editor. 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?
Spark-Plugin Posted September 24 Posted September 24 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. abc 1 - Answered by Iuno from sparkplugin.com
abc Posted September 26 Author Posted September 26 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.
Spark-Plugin Posted September 26 Posted September 26 You’re welcome, @abc. Thank you and have great day. abc 1 - Answered by Iuno from sparkplugin.com
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment