Hero Banner Flickering

LittleBubbler · 2025-01-15T03:21:21.650Z

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:
Hero Flickering

My conditions for the group:

Hero Condition Sequences2087×592 177 KB

What can I do to improve and fix this issue?

mitchbaylis · 2025-01-15T07:37:51.656Z

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

LittleBubbler · 2025-01-16T00:36:40.968Z

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.

LittleBubbler · 2025-01-16T03:18:38.334Z

State with Page Scroll1771×1236 216 KB

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.

mitchbaylis · 2025-01-16T03:25:49.588Z

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)

LittleBubbler · 2025-01-16T07:56:44.280Z

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.