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.
Any ideas?!!
Here is my public share link:
http://joneshaydu.webflow.io/studio
https://preview.webflow.com/preview/joneshaydu?preview=571005b54134272b80c2e5118339996b
Kind of hard to understand what you’re seeing. There were a lot of photos here, I can’t see where you’re talking about. Which page and which section is the focus?
If you go to the above link Gary, You will see a page that has backgrounds that transition as you scroll and/or navigate the links. The problem is, the first image is not loading until I scroll down a few pixels.
Were you able to see my example and understand the issue?
I did look but couldn’t locate the problem. I would send a message to @Nelson because he did a tutorial on this a while back. I believe he’ll be able to find the solution.
However, it looks like the bg scroll backgrounds need be wrapped in that parent wrapper which needs the scrolling vh to it. All the other backgrounds should be inside it.
I’ll reach out to him as well and get his perspective on what’s happening.
- I just messaged him
Hmm - it’s pretty darn clear to me. The first image is not loading. Once you move a couple pixels down the screen, everything is perfect. Thanks for replying.
Yeah me too, I can see clearly. I would wrap those backgrounds I couldn’t tell which layer was the “scrolling” div? But I know @Nelson will be able to help you because of his Workshop Tutorial.
There is no scrolling div - the images just swap via interactions. May be misunderstanding you.
The class called “section-people” is the section that has a bg-image that swaps on/off via interactions.
I should also mention that I followed the instructions to a “T” from this link Creating a background scroll interaction with Interactions 2.0 - YouTube
Yeah man, I’m in the site looking now. And now that I think about it, hmm. I honestly believe it might be overcooked. Dangit, I don’t like saying it, but I really think there’s a easier way. Too me, the interactions are not really needed because all your doing is showing layer images. The first IX1 Workshop he did wasn’t like this, if I can remember. (It was a while back)
You know what. I really really like your site! If you don’t mind can I use your read-only and re-do this for you?? And see if I can get it working.
Sure just let me know what you need. I could duplicate the page and make it RWX
Aww man dude!!! I feel silly now… We had to remove the intial 0% opacity… grrrr. Yeah no need for video… Just remove the “Initial State Opacity” in the interactions panel!
Then simply add the -1, -2, and so to the “bg-image-scroll” layers. Start with -1 and go down to -8, the last one. Now it’ll load properly.
You’ll need to fix the scroll a little because it takes image away too quickly 
Heehee.
Hey @garymichael1313 thanks so much for figuring out the ‘initial state’ bug.
So that fixed the first bug but created a new one where strange flashes of images in the z-index started happening in every transition upon scroll.
I solved this new bug by creating one instance of the transition without the ‘initial state’ checked for the first image in the page (z=-1) However, all subsequent images needed the ‘initial state’ checked which seems to have fixed the bug.
This one was very subtle so I thank you for your help!!
