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
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.