Jump to content

Animation on Grid:Overlay / Portfolio on mobile

Recommended Posts

Site URL: https://remivincent.com/

Hi guys,

I've set up a general Slide animation on my SquareSpace which I really like.

The problem is that it seems that the animation is triggered when we are in the middle of the block / element when scrolling.
I have a large Portfolio / Grid:Overlay and it's very problematic on a mobile, because you have to scroll a lot before the elements of the portfolio appear.

Please test this website on a mobile to be able to notice the problem :
https://remivincent.com/

Of course, I can turn off animations on my entire site, but I would like to keep them, and there are no options for animation on a Grid:Overlay element.

Do you know if it's a bug or if we can trigger animation with different behavior? (like when we are on a Vtop of a block instead of Vmiddle).

By the way, I'm using 7.1 version.

Thanks a lot for your help.

 

Edited by RemiV
Squarespace version
Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

I've tried the following :

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {
  	opacity: 1 !important;
  	transition: unset !important;
}

.gridThumbs {
    opacity: 1 !important;
  	transition: unset !important;
}

But it seams it's not on the entire block, so it's not enough yet.

Link to comment
18 hours ago, RemiV said:

I've tried the following :


.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {
  	opacity: 1 !important;
  	transition: unset !important;
}

.gridThumbs {
    opacity: 1 !important;
  	transition: unset !important;
}

But it seams it's not on the entire block, so it's not enough yet.

Add to Page Settings > Advanced > Header

<style>
  .tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {
  	opacity: 1 !important;
  	transition: unset !important;
}

.gridThumbs {
    opacity: 1 !important;
  	transition: unset !important;
}
</style>

 

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
  • 1 month later...
  • 2 months later...
On 8/29/2020 at 2:19 AM, fintan said:

@Aurore @RemiV

I've got this issue too! Did either of you manage to solve it?

Thank you!

if you share link to portfolio, we can check easier.

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

@tuanphan

The portfolio page can be seen at https://clownfish-elephant-hryn.squarespace.com/residential  Password tripfox

You should see the page load blank until you scroll down. I've tried your suggestions and it does not work. However, your code does work for other elements such as the footer content (as you suggested on another thread in the forum). Seems to be something odd about how portfolios are loaded.

I've had to disable animations completely on the live site www.moxyanco.com

Cheers,

John

Link to comment
On 9/5/2020 at 7:06 PM, fintan said:

@tuanphan

The portfolio page can be seen at https://clownfish-elephant-hryn.squarespace.com/residential  Password tripfox

You should see the page load blank until you scroll down. I've tried your suggestions and it does not work. However, your code does work for other elements such as the footer content (as you suggested on another thread in the forum). Seems to be something odd about how portfolios are loaded.

I've had to disable animations completely on the live site www.moxyanco.com

Cheers,

John

Hi. Incorrect password.

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

I have this same issue. It worked great for a while, then suddenly I have one page that won't load up right away. It happens to be the same page (I have 3 gallery pages , 2 work fine) that has the most content. My uneducated guess is that it has to do with the amount of content loading on the page, but it's really frustrating, as it worked beautifully before.

And issue is on the computer as well, so not just a mobile issue.

Edited by formfireglass
Additional info
Link to comment
  • 1 month later...

Hello everyone, I had exactly the same problem and config as people above — and stumbled across this thread. The solve? Unfortunately it's as simple as just picking another animation style in design. I settled on "slow" "fade" which I justified was relatively comparable in feel to "Slide". Hopefully SP fixes this bug.

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.