NO animation on one section of one page.

Site URL: https://rubymachine.com

Hi there, I'm new to the Forum.

I've been working on my site on Squarespace 7.1.

I have slide animations enabled site wide, but one page, the "equipment" page, has a long list of dense content, and the animations are not ideal for this one section of this page. It's especially noticable on phone, where I'll scroll down quickly, then there is a delay before the text shows up.

I'm looking for a way to have NO animation on the one section of the one page. I know there's a way to lookup an identifier for a section, but I'm wondering if there is code to disable the animations on that section, taking priority over the sitewide slide animations on everything?

Thanks!

Try adding to Design > Custom CSS

/* Equipment page - disable animation */
div#page-section-60c222752c13c90874840b87 * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

On 6/15/2021 at 1:40 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Equipment page - disable animation */
div#page-section-60c222752c13c90874840b87 * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

That worked! Thank you so much 🙂

Hi Guys, I'm trying to animated only one image in a block card with the code below but every clock card on the site start moving haha

Would you please know how to restrict it to only one particular block?

// up & down animation
#block-5d8361f5317a9a9bc5f4,
.image-inset {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}
 

On 6/18/2021 at 11:09 PM, Jeremyn said:

Hi Guys, I'm trying to animated only one image in a block card with the code below but every clock card on the site start moving haha

 

Would you please know how to restrict it to only one particular block?

 

// up & down animation
#block-5d8361f5317a9a9bc5f4,
.image-inset {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}
 

try this code

#block-5d8361f5317a9a9bc5f4 .image-inset {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, 0px); }    
}

Awesome!! Thanks Tuan 🙂

You and Creedon are amazing on this forum, you are solving every problems.

Hello, I'm having a horrible problem that seems related! I have clip animation on in site-wide controls for version 7.1 and for whatever reason once I click on a product in my shop, the picture of the product doesn't show. It's a blank screen. Once I turn off animations the product reshows itself. I believe turning off animations specifically for the product image would solve the problem, I would prefer to keep animations on the website as a whole if I can. I've attached images below.

wedge-oboe-br9c.squarespace.com

On 1/30/2023 at 9:31 AM, squeakarz said:

Hello, I'm having a horrible problem that seems related! I have clip animation on in site-wide controls for version 7.1 and for whatever reason once I click on a product in my shop, the picture of the product doesn't show. It's a blank screen. Once I turn off animations the product reshows itself. I believe turning off animations specifically for the product image would solve the problem, I would prefer to keep animations on the website as a whole if I can. I've attached images below.

wedge-oboe-br9c.squarespace.com

Hi,

What is password?