MOTION THEME - Collection page - Remove slow transition of Image Overlay - Opacity

[lion_no]

I’m currently upgrading our website, and I really like the looks of it as of right now - however, there’s slight slight perceived visual issue with the Collection page while using Colors - Image Overlay - Opacity.

When the Collection page image loads, even with ALL animations turned off, the Image “Overlay - Opacity” still fades in which ends up looking a bit weird.

Here’s how the collection page looks when it has loaded in:

and after a 1-2 seconds it looks like it should:

This only occurs on the Collection page image, not the header itself - so there’s some form of settings that only regards the collection page image and nowhere else (which is not controlled by the animation settings, which the header is)

Can be reproduced with these COLOR settings

All form of help is really appreciated!
It’s a bit weird that this setting ignores the animation settings, meanwhile it works fine everywhere else.

[KetanKumar]

@lion_no

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[lion_no]

Hii @KetanKumar !

Here’s a preview link to the URL, please scroll down and click to view the TWIN collection to compare with pictures shown above
https://ulqp0or1qzy8yyzo-50647859379.shopifypreview.com/

Thanks!

[lion_no]

@KetanKumar hi again!
Were you able to look into it, if you haven’t yet - best option based on the current design would be to choose “VIEW PRODUCT ARCHIVE” at the bottom.

If still unable to view it through preview mode (due to whatever reason), you could try to reproduce this error on the motion theme free trial with settings shown in the original post

[KetanKumar]

@lion_no

you have check theme setting lazyload option?

[lion_no]

@KetanKumar where should I specifically look for this option or configuration, in relation to this issue?
Thanks!

[KetanKumar]

@lion_no

you have to edite code >>> theme customization >>> theme setting >>> find that option

[lion_no]

@KetanKumar Unfortunately, there doesn’t seem to exist any option to toggle LazyLoad on/off in the Theme settings GUI.
Can only find references in the theme code.

[KetanKumar]

@lion_no

yes please give me theme code

[lion_no]

@KetanKumar attached is a copy of the current theme.css.liquid code.
(Couldn’t insert in message, due to its length)

[KetanKumar]

@lion_no

thanks for that code but i need full code

[lion_no]

@KetanKumar

How can I share the full code with you?
Through downloading and sharing the “Theme file” - or?

[KetanKumar]

@lion_no

yes current download and share

[lion_no]

I’ve now sent it to you on a direct msg!

[lion_no]

@KetanKumar additionally, here’s a direct preview link to the collection that shows the issue (refresh and you can see it)
https://28x38yzbem51frl6-50647859379.shopifypreview.com/collections/archive?sort_by=created-descending

[lion_no]

Have you found anything yet, @KetanKumar ?
I’ve updated to the latest theme version of Motion without any access on this issue.

See direct preview link to see the issue: https://t8n43rstgq4tsegu-50647859379.shopifypreview.com/collections/archive?sort_by=created-descending

[KetanKumar]

@lion_no

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[lion_no]

@KetanKumar

I’ve checked both on desktop and mobile, multiple browsers such as: Google Chrome, Edge, Firefox.
This does not appear to be a browser issue.

[lion_no]

Here’s a link to a short video showing the issue:
http://reactorcloud.diskstation.me:5000/d/s/lw8tAqnPkoBstDrApLl3aocIEon3BCpM/KqmdJULKZyX5KbGYCLK6AcVqxjawSnV2-UbTge-99AQk

As mentioned, this is only a problem on collection pages. NOT anywhere else.
With configuration:

[KetanKumar]

@lion_no

thanks for update yes i have also check again all work