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.