Annoying image flick when scrolling for the first time

[Jari_1]

Hey,

I’m having a hard time finding how can I take the image blink out when first time scrolled.

I’m using Impulse theme.

Website: www.halarmarken.se

The problem is, when first time scrolled, for example in the website, all the images, products, logos, everything blinks once. I cannot find the place where I can change this. The ideal outcome that images are normally showed without any blinks.

Does anyone know how to get rid of this? Is this some options I can modify or only available with code?

Thanks you guys!

[bart111]

hi Jari , ill look in to it for you mate

[bart111]

i see what you mean , im not a 100% sure but i will attach a ss for you it may be there

[bart111]

please try theme settings-product cards

[Lucy4905]

If you’re experiencing an annoying image flickering issue when scrolling for the first time on a website or application, there are a few potential reasons and solutions you can explore:

1. Lazy Loading: If the images on the website are using lazy loading, it might cause flickering when you first scroll since the images load asynchronously as you scroll down the page. Consider optimizing lazy loading or using a different lazy loading library to reduce or eliminate the flickering.

2. Image Size and Compression: Large images can take longer to load, causing flickering when you scroll. Compress and optimize images to reduce their file sizes and improve loading times.

3. CSS Transitions: CSS transitions or animations on images may lead to flickering when the page is first loaded. Check the CSS styles and animations applied to the images and ensure they are optimized for smooth rendering.

4. JavaScript Execution Time: Heavy JavaScript functions running on page load can delay the rendering of images and lead to flickering. Optimize your JavaScript code or consider deferring non-essential scripts to improve page loading performance.

5. Caching: Lack of caching can result in images being fetched each time the page is loaded, causing flickering. Implement proper caching strategies to serve cached images, reducing flickering on subsequent visits.

6. Preloading: Use image preloading techniques to load images in the background before they appear in the viewport. This can reduce flickering when scrolling down the page.

check my webiste theme click here.

https://thelinencollection.nl/shop/dekbedovertrek-katoensatijn-geblokt-patroon/

[Jari_1]

Thanks for the reply @bart111 !

As I’m using Impulse theme, there is no exactly same way to adjust theme settings than in Dawn. From my point of view the similar Products, Product tiles or collection tiles. I tried to change every possible option to see whether flickering stops. Nothing stopped that.

I think it is not only with the products, but as well with all other images, since two pictures below the front page products and other pictures are flickering as well.

[Jari_1]

Thanks for your answer @Lucy4905

I think this might have something to do with the CSS transitions or preloading.

Any idea where I should find these parts to check if they’re the affecting thing?

The image preloading might be the thing. Some sort of option of lazy loading. I’ve limited the products displayed, so the image loading even bfore scrolling might be suitable solution. From my point of view, it seems the Shopify or the Impulse theme is trying to “look cool” with thise image appearance, but tbh it is bugging me quite a bit. Rather would have a plain showcase of images.

[bart111]

I got an idea , do as I always do if I can’t do something I always go to 24/7 live chat they are amazing and will guide you through while you speak to them buddy

[Jari_1]

@bart111

Already did. They actually responded like in 15 minutes. They stated pretty fast that some sort of coding “might” be needed. And I should maybe hire an expert to make the solution. They also winked the experts.shopify.com to find the expert.

But before that, I just wanted to see whether someone from here had the same issue, because I think this is one of the common ones with Impulse theme as it is by default.

I’ve done websites with woocommerce and this kind of problem was easily found in the options. First time working with shopify platform, don’t have this kind of knowledge, yet.

[tim_1]

This is a feature of your theme, they use AOS library to do it.

Maybe there is a setting to control this, not sure as have not seen the theme recently.

However, you may try commenting the following in your theme.css asset:

.aos-animate[data-aos=image-fade-in] img{
    animation:fade-in 0.5s cubic-bezier(0.29, 0.65, 0.58, 1) forwards;
}

Alternatively, you may look at the theme.js asset, search for AOS.init and play with parameters, like this:

/*
  AOS.init({
    easing: 'ease-out-quad',
    once: true,
    offset: 60,
    disableMutationObserver: true
  });
*/
AOS.init({disable: true});

Obviously, if you do not want this, the best would be to remove the AOS code completely from the theme, this would require a bit more effort.

[Jari_1]

Thank you very much for your reply @tim_1 !

I’ve checked your first solution in theme.css asset.

I located the part:

.aos-animate[data-aos=image-fade-in] img{
animation:fade-in 0.5s cubic-bezier(0.29, 0.65, 0.58, 1) forwards;
}

swapped it to:

.aos-animate[data-aos=image-fade-in] img{
animation:none;
}

From my point of view the flickering stopped atleast with the products. In the home page some of other pictures are still flickering, maybe it is controlled from somewhere else. However this might be enough for me.

Can you tell whether that kind of modification I just did is fine the way it won’t break any others parts of the website? Or would you suggest modifying it with different way?

[Jari_1]

@tim_1 ,

I tried your second option with theme.js asset.

By adding

AOS.init({disable: true});

to the end of the lines, it seems to be working with every image, including logos and the other boxes that theme.css modifications didn’t do.

The part is currently like this:

AOS.init({
easing: ‘ease-out-quad’,
once: true,
offset: 60,
disableMutationObserver: true
});
AOS.init({disable: true});

From my point of view this is much better option since it just disables the whole easing eventhough it would be true. This is the best option for me.

Could you please check that code, whether it is correctly typed?

(I’m not sure from the

});
AOS.init({disable: true});

part, should I remove the upper brackets or not.

Nonetheless, this was the solution to my problem and will Accept it as solution!

[tim_1]

Yes, I guess disabling AOS initialization is a better, more robust option than commenting out all animations.

In my code snippet I’ve put comments around the code which is/was originally in the theme and added at the bottom the code which should be run instead.

You’ve decided to keep the old code – this does not break anything, just does not make sense to enable it and then immediately disable.

But it also takes some (even if small) time to run, so I’d recommend removing or commenting the original code out the way I did.

[Jari_1]

Thank you so much @tim_1 ,

Ive changed the code to your suggested:

/*
AOS.init({
easing: ‘ease-out-quad’,
once: true,
offset: 60,
disableMutationObserver: true
});
*/
AOS.init({disable: true});

This is working with the images properly, so I guess I inserted it correctly.

Thank you for your really helpful and understandable solution to my problem.

Hope you’re having an amazing day!

-Jari