This is a tricky one.
I’ve followed the “Creating a background scroll interaction with Interactions 2.0” YouTube demo and created a section of a site to swap seven bg images as you scroll down the studio page. It took awhile to get it to work but now all of the images swap for two use cases 1) when scrolling 2) when navigating via links.
The only two issue I’ve had is: 1)Image either doesn’t show on first load until I scroll a few pixels
I’ve tried these solutions.
Have a copy “bg-image-scroll bg1” below all other images in the z-index called “bg-image-scroll bg” so that when it unloads the first image as you scroll back up to the top, it won’t just be blank. Unfortunately, this solution works but it creates a bug of showing “bg-image-scroll bg” in between each transition as you scroll. It basically fade transitions over this image instead of cross fading i.e. bg2 and bg3.
I removed the duplicate described above. Unfortunately, This just leaves the bg blank once you return to the bg1 position after scrolling down and back up.
I tried removing the interaction on the first bg image only. This just leaves the bg the same bg (because all of the rest are lower in the z-index and bg-1 has not swapped)
I think I’ve narrowed it down to an offset issue as if I load example #1&2 where the duplicate is the lowest and I’m swapping bg1 in and out. The real issue is that on first load, the image does not load until I scroll down a few pixels.
Here is my public share link: