Turn Off Site-Wide Animations On One Block With Squarespace Fluid Engine

Site URL: https://parrot-roadrunner-h4je.squarespace.com/

Hey! With the new Squarespace Fluid Engine, we are having trouble finding a code that will disable the site-wide animation for just one block. Anyone have any leads on that? 

https://parrot-roadrunner-h4je.squarespace.com/

password: demo 

We're trying to remove the load-in animation on just a few blocks. 

I would also love to find a workaround for this which allows for individual image block animations while bypassing the now only site-wide option

Try this CSS

#enter-block-id * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hi all!

I'd like to turn off the slide animation on a particular page's image block carousels only, any pointers with code? 😬

https://www.poofthemess.com/projects

On 3/4/2023 at 7:25 AM, tracey said:

Hi all!

I'd like to turn off the slide animation on a particular page's image block carousels only, any pointers with code? 😬

https://www.poofthemess.com/projects

I see 3 carousels, which are you referring to?

On 3/6/2023 at 9:13 AM, tuanphan said:

I see 3 carousels, which are you referring to?

Was there any solution to this? 

Thanks

On 3/31/2023 at 10:01 PM, JonnyIlsley said:

Was there any solution to this? 

Thanks

Can you share link to page where you have problem? We can help easier

9 hours ago, tuanphan said:

Can you share link to page where you have problem? We can help easier

I am wondering if it's possible to reduce padding around a Fluid Engine summary block. 

This is why I was looking at this thread initially as I couldn't seem to find anything else on the topic.


I am using a plugin from Will Myers to create tabs on a page.
This means that when you put a section inside the tab, it squashes the width to fit the tab block. 

However, when using a summary block in Fluid Engine it seems to create excess space at the bottom of the summary block and therefore creating a big gap.

To solve this I either need to:

1) remove the excess padding on my Fluid Engine summary block container. To do this I would need to make sure it is responsive on all screen sizes and that when I resize, I do not lose text elements from the summary block that are floating underneath the image.

or 

2) Do not use a Fluid Engine section. Revert back to a classic editor section. This seems to sort the padding issue I think, however, to achieve the same layout as an FE section, I need to be able to make the summary block container stretch from edge to edge of the section.


Currently, you will see the tabs under the Section entitled "Team Form" :

https://hexahedron-soybean-zdl8.squarespace.com/about-us#TeamForm
password: testing123


The tables are titled "All Staff" and "Management" 

The "All Staff" tab shows what happens when I use a Classic Editor section (see option 2 above)

The "Management" tab shows what happens when I use a Fluid Engine section (see option 1 above)


If you know any way in which I can achieve the layout that is visible in the "Management" tab but have no spacing at the bottom, that would be great. 

Thanks very much in advance,

Jon 
 

32 minutes ago, JonnyIlsley said:

I am wondering if it's possible to reduce padding around a Fluid Engine summary block. 

This is why I was looking at this thread initially as I couldn't seem to find anything else on the topic.


I am using a plugin from Will Myers to create tabs on a page.
This means that when you put a section inside the tab, it squashes the width to fit the tab block. 

However, when using a summary block in Fluid Engine it seems to create excess space at the bottom of the summary block and therefore creating a big gap.

To solve this I either need to:

1) remove the excess padding on my Fluid Engine summary block container. To do this I would need to make sure it is responsive on all screen sizes and that when I resize, I do not lose text elements from the summary block that are floating underneath the image.

or 

2) Do not use a Fluid Engine section. Revert back to a classic editor section. This seems to sort the padding issue I think, however, to achieve the same layout as an FE section, I need to be able to make the summary block container stretch from edge to edge of the section.


Currently, you will see the tabs under the Section entitled "Team Form" :

https://hexahedron-soybean-zdl8.squarespace.com/about-us#TeamForm
password: testing123


The tables are titled "All Staff" and "Management" 

The "All Staff" tab shows what happens when I use a Classic Editor section (see option 2 above)

The "Management" tab shows what happens when I use a Fluid Engine section (see option 1 above)


If you know any way in which I can achieve the layout that is visible in the "Management" tab but have no spacing at the bottom, that would be great. 

Thanks very much in advance,

Jon 
 

Apologies, I thought this was a different thread. Shall I make a new thread with the query above?

10 hours ago, tuanphan said:

Can you share link to page where you have problem? We can help easier

For this, I was wondering if it is possible to turn off Site Wide Animation on summary blocks. 

I do not want the images to slide up from the bottom on the initial load. This is what my site-wide animation is set to.

However, anything I have tried to turn off site animation for these blocks stocks the summary block carousel from being able to scroll around. 

See bottom of page, the section titled "Related Projects"
https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house
password: testing123

On 4/5/2023 at 6:58 PM, JonnyIlsley said:

For this, I was wondering if it is possible to turn off Site Wide Animation on summary blocks. 

I do not want the images to slide up from the bottom on the initial load. This is what my site-wide animation is set to.

However, anything I have tried to turn off site animation for these blocks stocks the summary block carousel from being able to scroll around. 

See bottom of page, the section titled "Related Projects"
https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house
password: testing123

Try adding to Design > Custom CSS

div#block-yui_3_17_2_1_1680602460829_8673 * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

On 4/8/2023 at 3:20 AM, tuanphan said:

Try adding to Design > Custom CSS

div#block-yui_3_17_2_1_1680602460829_8673 * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

Hi @tuanphan,

When I try this, the animation seems to stop however now I cannot press the next or previous button on the carousel which allows me to move to the next items in the summary block.

On 4/11/2023 at 3:21 PM, JonnyIlsley said:

Hi @tuanphan,

When I try this, the animation seems to stop however now I cannot press the next or previous button on the carousel which allows me to move to the next items in the summary block.

Try this new code

div#block-yui_3_17_2_1_1680602460829_8673 .summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

10 hours ago, tuanphan said:

Try this new code

div#block-yui_3_17_2_1_1680602460829_8673 .summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

This seems to work.
Thank you very much @tuanphan! 

10 hours ago, tuanphan said:

Try this new code

div#block-yui_3_17_2_1_1680602460829_8673 .summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

@tuanphan Would you be able to show me how I could use this code but apply it to every summary block excluding these summary blocks:

#block-3e3a8fb0677b05b9467c
#block-yui_3_17_2_1_1680625588392_25188
#block-88491361d1ed9516cf34

Thanks

On 4/14/2023 at 9:29 PM, JonnyIlsley said:

@tuanphan Would you be able to show me how I could use this code but apply it to every summary block excluding these summary blocks:

#block-3e3a8fb0677b05b9467c
#block-yui_3_17_2_1_1680625588392_25188
#block-88491361d1ed9516cf34

Thanks

Use this code

div:not(#block-3e3a8fb0677b05b9467c):not(#block-yui_3_17_2_1_1680625588392_25188):not(#block-88491361d1ed9516cf34) .summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

22 hours ago, tuanphan said:

Use this code

div:not(#block-3e3a8fb0677b05b9467c):not(#block-yui_3_17_2_1_1680625588392_25188):not(#block-88491361d1ed9516cf34) .summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

For some reason, this makes my summary blocks that are using a hover to show text display incorrectly.

Unfortunately didn't work. 

See images attached.

On 4/14/2023 at 9:29 PM, JonnyIlsley said:

@tuanphan Would you be able to show me how I could use this code but apply it to every summary block excluding these summary blocks:

#block-3e3a8fb0677b05b9467c
#block-yui_3_17_2_1_1680625588392_25188
#block-88491361d1ed9516cf34

Thanks

Can you share link to page where you use these summaries?

1 hour ago, tuanphan said:

Can you share link to page where you use these summaries?

This is an example of a page where I will be using this.

However, this will be at the bottom of every project you click into. Under the "Related Projects" section.

https://hexahedron-soybean-zdl8.squarespace.com/private-homes/kenwood-lee-house

Password: testing123

6 hours ago, tuanphan said:

Can you share link to page where you use these summaries?

@tuanphan

Sorry, I have been asked by the site owner to change this section so now it is using a list section.

Is there a way to stop the animation when it comes in but keep the ability to scroll on these sections?

The section id is = section[data-section-id="643ebedc7cece165a63fe33f"]

I am just trying this out here but will need to apply this to all my related project pages as mentioned above. 

I think I just need to change the first part of this code. Change the .summary-item-list part? :

.summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

On 4/19/2023 at 11:00 PM, JonnyIlsley said:

@tuanphan

Sorry, I have been asked by the site owner to change this section so now it is using a list section.

 

Is there a way to stop the animation when it comes in but keep the ability to scroll on these sections?

The section id is = section[data-section-id="643ebedc7cece165a63fe33f"]

I am just trying this out here but will need to apply this to all my related project pages as mentioned above. 

 

I think I just need to change the first part of this code. Change the .summary-item-list part? :

.summary-item-list * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

Can you share link to page where you use this section? We can check easier

On 4/22/2023 at 2:09 AM, tuanphan said:

Can you share link to page where you use this section? We can check easier

This is the page: 
https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house

password: testing123

Its the bit that says Related Projects down the bottom.

On 4/24/2023 at 3:55 PM, JonnyIlsley said:

This is the page: 
https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house

password: testing123

Its the bit that says Related Projects down the bottom.

Try this CSS

.user-items-list-item-container[data-section-id="643ebedc7cece165a63fe33f"] * {
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

These animation settings on the site styles navigation and where animation styles are listed you can turn on and off if it is Squarespace default else follow the hard codes style as other responses on this very topic above.