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.
Solved! Go to the solution
@KetanKumar if possible, could you also send me a link or preview link to a site where this is working as it should?
yes i have check motion theme default
@KetanKumar I'm not sure if you understand what the issue is.
I've just downloaded the newest motion theme and have **ONLY** made this change:
and the issue exists on default theme as well, here is a screenshot of collection page image loading
here is image when page loading is complete
Exactly the same issue as my custom variant of the Motion theme, so it's still a issue with the theme default...
can you please sent new theme url also possible to share video
This is an accepted solution.
@KetanKumar - video has already been shared a few comments back,
BUT... I've managed to find the solution, by testing and tweaking different settings one by one!
Turns out that there's a configuration in theme.css.liquid called .collection-hero__content:before which refers to transition:opacity 2.5s ease;
This setting seems to be causing my issue, and it completely ignores any animation settings!
so changing this to 0s have solved my loading issue!
Documenting this as a comment, incase someone else has the same issue as me in the future!
great thanks for update and share code