How Do I Remove Animation From One Page Only?

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

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;;
}

Didn't work for me. Hoping someone else might have an answer!

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

thanks @tuanphan. For me that didn't work. Do you have an idea what else could work? 

https://www.coachfident.net/karriere-beratungsgespraech-sichern

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;
}

I was just looking for this very thing. Thank you so much! It worked on my client's site beautifully.

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!

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!

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;
}

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!

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;
}

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.

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;
}

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! 

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;
}

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! 

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;

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.