Please note there are flashes/flickering below.
I’ve created a hero banner using a group that switches its background image if a condition is met. However, I’ve noticed that there are some flickering every now & then on both desktop & mobile version.
It looks like this:

My conditions for the group:
What can I do to improve and fix this issue?
you don’t want to use scroll position, width or height dynamic variables as each time the elements are reloaded those values potentially change as the canvas is resized (even to the same size)
if you must use those values save them in a state on page load (downside is if the user scales the screen then the state values are fixed - although there’s a slim chance most users will do that)
doesn’t look like the image changes very much so I’d also evaluate whether you actually need to change the image on scroll or if you could achieve a similar result another way
I see. I believe I understand what you’ve explained.
For the solution using states - could you elaborate more on this?
From what I gathered, I could use states to load the conditions on page load, but I’d still be using scroll positions within them. I don’t think this was what you were trying to say because you advised not to use scroll positions/width/height dynamic variables.
I’ve switched to states, but still using scroll positions. This was what I understood from your advise. I’ve set it to load the first state on page load, and the rest is set to every time the condition is met.
The flickering still happens.
you could use a gif in the hero image
your goal is to try and animate it so a gif would achieve that
you could also use a front end workflow that runs when the image is visible where it sets a state to a number every 2 seconds and then reference the number to change the image (but a gif would be better since it is self contained animation)
the flickering could also be because the images need to be loaded to the page with the condition change - you could try preloading them using image elements without conditions on them and then hide those elements (this way the data is ready to be used and doesn’t need to be downloaded when condition changes)
1 Like
I implemented preloading as you’ve mentioned, and my hero banner no longer flickers. I followed this tutorial to prefetch images using an HTML element rather than an image element due to Imgix.
Thank you for your pointers & time, Mitch.