Jump to content

How Do I Remove Animation From One Page Only?

Recommended Posts

Posted

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

Posted

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

 

  • 1 year later...
Posted
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

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!)

  • 1 month later...
Posted
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;
}

 

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!)

  • 1 month later...
  • 1 year later...
Posted
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!

  • 1 month later...
Posted (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 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!)

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

Posted
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!)

  • 3 weeks later...
Posted
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!)

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

Posted
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!)

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

Screen Shot 2023-10-12 at 5.33.39 PM.png

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

Screen Shot 2023-10-12 at 5.33.39 PM.png

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!)

  • 1 month later...
Posted
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.

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.