Background Image interaction

How can you make a background image change by fading out and in when scrolling?
meaning - section 1 have a bg image of a cat and section 2 have a bg image of a dog.
when scrolling from sec1 to sec2 the cat image will fade out and at the same time the dog image will fade in.

Hi @Yofiel_Levi

A quick search in the forums can often bring up topics that have already been discussed.

Here’s one though;
@cyberdave created this cloneable site where you can have a look to see the procedure for the exact effect you’re after.
https://webflow.com/website/Change-Background-Image-on-Scroll

Quite funny, as it actually uses the examples you mentioned too! Cats and Dogs :grin:

If you get stuck, post back here with your read-only link and one of us will be happy to help you out.

Have fun!

haha, some coincidence.

I saw that he did that with divblocks that changes on page scroll. which if I decide to add a new section later on messes up the animation and I will need to go in to fix it.
is there a way to make it without using where on the page the user is?
like, a section element animation and not a page animation.

@Yofiel_Levi I’m trying to get something similar done. Just wondering - did you ever get this figured out?