Jump to content

How to disable site-wide animation on one (Portfolio) page only

Go to solution Solved by tuanphan,

Recommended Posts

I am experiencing major delays in portfolio content showing up, particularly in mobile view, on the "Our Work" Page of my site while using the site-wide animation "slide". This is the portfolio image gallery that links to the portfolio sub-pages set to "grid-overlay" layout. This makes it so that while viewing the "Our Work" page you have to scroll way down the page before content populates.

Does anyone know how to disable site-wide animations for just one Page? Is there any custom css that might solve this?

Site unpublished. Password: Squarespace

Screenshot 2023-01-28 at 10.49.08 AM.png

Link to comment

Hi, I am having the same on my portfolio page. https://www.feastaway.co.uk/recipes I emailed help and they said below.  I have looked into re-sizing but the page is 4.6mb so less than the 5mb recommend  and my 13 images are all 50-70kb each, less than the 500kb recommend.

The page never loads on mobile until you scroll down rigorously  but it looks empty. I was looking at what other people use for portfolio pages in case there was a better way for me to display photos with links to info but I wonder if the same thing is impacting both.

I am interested in what this would do site-wide animation "slide" 

I am going to go back to the help as I've shrunk as much a I can.

We understand that your "Recipes" page is appearing blank on a mobile device but is showing up on desktop.
 
I've had a look at your site and I can see that when heading to the recipes page I'm able to see the content loading on both a desktop and a mobile device. I do see on the mobile device it does take an extra few seconds to load though.
 
Since this is a Gallery Page and it has many images on it,  this is likely the reason it takes a bit longer to load on mobile devices. I would recommend taking a look over this guide here that will provide some tips on how to keep your site mobile-friendly: https://support.squarespace.com/hc/en-us/articles/205815828-Tips-for-keeping-your-site-mobile-friendly 
 
Additionally, decreasing your image sizes so the page loads quicker may also help too. More information on helping images load quickly on your site can be found here: https://support.squarespace.com/hc/en-us/articles/360022529371#toc-help-images-load-quickly 
 
If you are still experiencing this issue after making some adjustments to the image sizing, please let us know. And please let us know if there's anything else we can answer for you - we're here 24/7 and always happy to help!

Link to comment
  • 1 month later...

@tuanphan I am running into the same issue with the fluid engine portfolio page layout.

URL: ashandaircreative.com/portfolio-udpdate

I tried changing the animation from slide to to scale and increased the animation speed to medium, but the new portfolio section I created still takes too long to load, in my opinion.

I would love to have the site-wide animation set to a slow speed and slide, but turn it off on my update portfolio page. 

Please note when reviewing, the page linked in navigation is not the page I am talking about. That is the old one I am hoping to swap out with the one I am creating. 

Thanks so much!

Link to comment
On 3/22/2023 at 1:20 AM, AshM13 said:

@tuanphan I am running into the same issue with the fluid engine portfolio page layout.

URL: ashandaircreative.com/portfolio-udpdate

I tried changing the animation from slide to to scale and increased the animation speed to medium, but the new portfolio section I created still takes too long to load, in my opinion.

I would love to have the site-wide animation set to a slow speed and slide, but turn it off on my update portfolio page. 

Please note when reviewing, the page linked in navigation is not the page I am talking about. That is the old one I am hoping to swap out with the one I am creating. 

Thanks so much!

The url doesn't exist

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

Link to comment
  • Solution
On 3/28/2023 at 12:02 AM, AshM13 said:

Add to Design > Custom CSS

body#collection-640f4916d4f5c00fd2fc06f0 * {
    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!)

Link to comment
  • 2 months later...
On 6/5/2023 at 4:35 PM, adaSTUDIO said:

Experiencing this problem with mobile version also.  The transition delay in the images makes the page look empty and consequently getting a lot of fall off.  I tried the above with no success.

https://www.adastudio.co.uk/shop

Try this code

body#collection-62f128129ef8af71d3316576 * {
    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!)

Link to comment
  • 6 months later...
On 12/21/2023 at 2:16 AM, MadeByJC said:

Same question for my portfolio page as well. I tried the code above. I assume that the sequence of numbers and letters that follow "body#collection-" is specific to the actual page I'm trying to make the change on.

madebyjcurtis.com/work

Thanks!

Use this code

body#collection-65617b37d80eb03260094d87 * {
    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!)

Link to comment
On 12/28/2023 at 7:24 AM, MKrause18 said:

So I'm wanting to do kind of the opposite. I'd like to do the scale effect on just this page. 

 

https://www.eventnetwork.com/the-campus-experience-store

Try this

body#collection-657791290079e95e3a217954 article * {
    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!)

Link to comment
On 12/22/2023 at 3:12 AM, tuanphan said:

Use this code

body#collection-65617b37d80eb03260094d87 * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

Thank you for the response.

I entered the code into my CSS, and the Titles for each project show (text only), but not the Featured Images (Thumbnails).

Any ideas?

Link to comment
On 1/2/2024 at 7:29 AM, MadeByJC said:

Thank you for the response.

I entered the code into my CSS, and the Titles for each project show (text only), but not the Featured Images (Thumbnails).

Any ideas?

Try this

body#collection-65617b37d80eb03260094d87 * {
    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!)

Link to comment

When I use this CSS to eliminate the animation on my portfolio page it seems to mess with my navigation folders by "unfolding" them. That doesn't seem normal. Is there any way to prevent that, or has this script been updated anywhere else to simply target the portfolio projects and not the animation on the entire page? I think I have a transition on the navigation link color that may be conflicting with this CSS code transition. 

 

Was using this code:

body#collection-6132ebc5f6f13b0e87db18f2 * {
    transform: unset !important;
    opacity: 1 !important;
    transition-delay: unset !important;
    transition: unset !important;
}

 

On this page:

https://www.coorlasarch.com/residential

 

Capture.JPG

Link to comment
  • 3 weeks later...

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.