kristihoffman Posted July 2, 2020 Share Posted July 2, 2020 Site URL: https://www.susanswartz.com/available-work Hello, I have a newly published artist website, and the artwork is displayed by series on a portfolio page. When scrolling down, the images take quite a bit of time to load so that the page initially appears blank. After chatting with a Squarespace rep, I was advised to remove animations. I tested this, and while it was successful, it is a site-wide change. I am in search of a bit of code to add to this particular page to remove animation from this page only. Any help is greatly appreciated! K Link to comment
rwp Posted July 3, 2020 Share Posted July 3, 2020 Does this work? [data-section-id="5ea10d0c31650d63e22d108a"] .slideIn { opacity: 1 !important; transform: none !important; } [data-section-id="5ea10d0c31650d63e22d108a"] .preSlide { transform: none !important; transition-property: unset !important;; } tuanphan 1 Link to comment
bybridges Posted January 4, 2022 Share Posted January 4, 2022 Didn't work for me. Hoping someone else might have an answer! Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 10 hours ago, bybridges said: Didn't work for me. Hoping someone else might have an answer! Try edit page >> Add a Code Block (anywhere) >> Paste this code >> Save & reload the site <style> .slideIn { opacity: 1 !important; transform: none !important; } .preSlide { transform: none !important; transition-property: unset !important;; } </style> If it doesn't work, pleaes share page url, we can check easier marybethonline and Siddarth 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
coachfident Posted February 24, 2022 Share Posted February 24, 2022 thanks @tuanphan. For me that didn't work. Do you have an idea what else could work? https://www.coachfident.net/karriere-beratungsgespraech-sichern Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/24/2022 at 10:59 PM, coachfident said: thanks @tuanphan. For me that didn't work. Do you have an idea what else could work? https://www.coachfident.net/karriere-beratungsgespraech-sichern Try this new code (Design > Custom CSS) body#collection-621780135963ec65b3fc29cc * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } schmutzie and NickJames 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
schmutzie Posted March 29, 2022 Share Posted March 29, 2022 I was just looking for this very thing. Thank you so much! It worked on my client's site beautifully. Link to comment
NickJames Posted July 12, 2023 Share Posted July 12, 2023 On 2/26/2022 at 11:26 PM, tuanphan said: Try this new code (Design > Custom CSS) body#collection-621780135963ec65b3fc29cc * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } I grabbed the "#collection" tag for my website page using developer tools in chrome and replaced it with the collection tag you had. This worked perfect for me as well. Thanks! tuanphan 1 Link to comment
MikeEB Posted September 1, 2023 Share Posted September 1, 2023 Hello! I also have a similar question, but I'm having trouble figuring out how to apply this to my own portfolio site. I'd like to remove the "Clip" animation from a full page, while keeping it on the other pages, if possible. Here is the page in question: https://www.mikeebresnahan.com/work-1/casestudy-navigatedu @tuanphan do you have any ideas? Any help is appreciated! Link to comment
tuanphan Posted September 3, 2023 Share Posted September 3, 2023 (edited) On 9/1/2023 at 9:04 AM, MikeEB said: Hello! I also have a similar question, but I'm having trouble figuring out how to apply this to my own portfolio site. I'd like to remove the "Clip" animation from a full page, while keeping it on the other pages, if possible. Here is the page in question: https://www.mikeebresnahan.com/work-1/casestudy-navigatedu @tuanphan do you have any ideas? Any help is appreciated! Try this code (Website > Website Tools > Custom CSS) body#item-6432162e9725441dbda69b5f article * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } Edited September 3, 2023 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
MikeEB Posted September 6, 2023 Share Posted September 6, 2023 On 9/3/2023 at 4:04 AM, tuanphan said: Try this code (Website > Website Tools > Custom CSS) body#item-6432162e9725441dbda69b5f article * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; } @tuanphan thank you for responding, but unfortunately that code didn't do the trick. It actually added a white tint / overlay to the images on the page, but the "clip" animation still persists. If you have any other ideas, I'm all ears... haha 😄 Otherwise I really appreciate the time. Thanks again! Link to comment
tuanphan Posted September 9, 2023 Share Posted September 9, 2023 On 9/7/2023 at 6:51 AM, MikeEB said: @tuanphan thank you for responding, but unfortunately that code didn't do the trick. It actually added a white tint / overlay to the images on the page, but the "clip" animation still persists. If you have any other ideas, I'm all ears... haha 😄 Otherwise I really appreciate the time. Thanks again! Use this new code body#item-6432162e9725441dbda69b5f .sqs-image { -webkit-clip-path: none !important; clip-path: none !important; animation: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Broadleaf Posted September 29, 2023 Share Posted September 29, 2023 I am trying to keep the fade animation on all pages except for my "Services" page. Linked here. It was built with many texts boxes and loads in a strange way. https://broadleaflearning.squarespace.com/services I didn't have luck with above code. Any ideas? Thanks. Link to comment
tuanphan Posted October 3, 2023 Share Posted October 3, 2023 On 9/30/2023 at 12:41 AM, Broadleaf said: I am trying to keep the fade animation on all pages except for my "Services" page. Linked here. It was built with many texts boxes and loads in a strange way. https://broadleaflearning.squarespace.com/services I didn't have luck with above code. Any ideas? Thanks. Try this new code body#collection-64e90d8c1121b85f8c4ecab7 .content-wrapper * { transform: unset !important; transition-delay: unset !important; transition: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DizzyElephant Posted October 10, 2023 Share Posted October 10, 2023 On 10/3/2023 at 4:24 AM, tuanphan said: Try this new code body#collection-64e90d8c1121b85f8c4ecab7 .content-wrapper * { transform: unset !important; transition-delay: unset !important; transition: unset !important; } I'm having the same issue, I want to remove the animation from all of the pages including case studies except the SIDE PROJECT page: https://www.sharon-yuxin-tao.com/client-works and the ABOUT ME page: https://www.sharon-yuxin-tao.com/about-me. May I know how does the collection and item works? I was trying to figure it out by myself but had no luck, thanks! Link to comment
tuanphan Posted October 12, 2023 Share Posted October 12, 2023 On 10/10/2023 at 9:23 AM, DizzyElephant said: I'm having the same issue, I want to remove the animation from all of the pages including case studies except the SIDE PROJECT page: https://www.sharon-yuxin-tao.com/client-works and the ABOUT ME page: https://www.sharon-yuxin-tao.com/about-me. May I know how does the collection and item works? I was trying to figure it out by myself but had no luck, thanks! Try this code body:not(#collection-650cd3f3a9514b5177327d43):not(#collection-64bc6e342da2562b97550f57) .content-wrapper * { transform: unset !important; transition-delay: unset !important; transition: unset !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DizzyElephant Posted October 12, 2023 Share Posted October 12, 2023 On 10/3/2023 at 4:24 AM, tuanphan said: Try this new code body#collection-64e90d8c1121b85f8c4ecab7 .content-wrapper * { transform: unset !important; transition-delay: unset !important; transition: unset !important; } I implemented the code to custom CSS, however, the section of " Working with Clients" kind of got messed up: https://www.sharon-yuxin-tao.com/, three images under gallery got overlapped with each other, I'd appreciate your help on that, thank you! Link to comment
tuanphan Posted October 15, 2023 Share Posted October 15, 2023 On 10/13/2023 at 4:33 AM, DizzyElephant said: I implemented the code to custom CSS, however, the section of " Working with Clients" kind of got messed up: https://www.sharon-yuxin-tao.com/, three images under gallery got overlapped with each other, I'd appreciate your help on that, thank you! Remove this line transform: unset !important; Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
marybethonline Posted November 22, 2023 Share Posted November 22, 2023 On 1/4/2022 at 9:07 AM, tuanphan said: Try edit page >> Add a Code Block (anywhere) >> Paste this code >> Save & reload the site <style> .slideIn { opacity: 1 !important; transform: none !important; } .preSlide { transform: none !important; transition-property: unset !important;; } </style> If it doesn't work, pleaes share page url, we can check easier This worked for me on my portfolio! Thank you. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment