I do have a question am working on Background scroll effect and am having a problem with the first section BG So I have the scroll action but how do I work on section one BG without affecting the rest of the bg’s
am working off this Video have it set up just like in the vid
Do I just axe out the starting section IE section 0
What do you mean “Axe out the starting section IE”?
So I have everything set up just like the video with each section and the actions but the first section has no interactions just like the vid. My question is how to I change the first sections BG without affecting the sections BG’s below.
Do you mean change the 1st BG’s color? Or do you mean change it to an image or something?
Both potentially, But color for now till I get this sorted. right now the section 0 comes up white the same as the Body
Sorry have to wait to post every time
https://preview.webflow.com/preview/rcc-project?preview=ce4ff07b0b9e0b579338f38d9afcbcdd
If you post your read-only link I can take a look. But it’s the same as any element’s css background color property.
Oh that’s because you have 4 sections but only 3 backgrounds. Add a color BG for each section you will show above.
Yeah each section needs a corresponding color. Take care and have fun 
Okay so changed the first BG to gradient and this happened… Go white on load then once scrolled down and then back up the gradient shows up?
Am looking to flow from one gradient to the next.
https://preview.webflow.com/preview/rcc-project?preview=2eada9259a0a28d266b24c8a12f74145
I have the interactions on each class not the BG itself so BG/1 BG/2 and so on…
Have to post in edit as I can’t post again today lol
Going to start fresh again and see if I am doing something wrong.
Okay I must be totally missing something or this tut is flawed as it doesn’t leave you in a start point.
Alright I think I may have it will post it tomorrow.
PS Thank you Gary For your help I am so stoked have the action figured out now just need to play with location of the Gradients so they flow. It was 2 steps missing to make it work for me so will post what I did diff then the TuT. Needed new class BG0, -2 for initial state
Yep so I got her working last night. Here is the work_up for ya to see.
https://preview.webflow.com/preview/rcc-project?preview=2eada9259a0a28d266b24c8a12f74145
Now that I understand how this works I just got to tweek the gradients, this is finicky but worth the time as I think its a very neet look and as far as I have seen no one has done this yet. Images take to much time to load and this was only possible before with a ton of work in PS and then you would still have problems with working with BG Images. Anyone who has work with BG images knows what I am talking about. With this I have full size BG with just CSS that has Gradient flow with out an image getting resized.
I can’t say it enough you guys at Webflow rock!!!
Yeah you should wrap the bg’s in their own layer. Go to my collection and the page is “Background Scroll Interaction”. Look at my structure.
On your’s the first bg layer needs to be “0” so it shows up first.
- Add bg wrapper, make -1
- Add 1st bg, doesnt’ need z-index
- Add 2nd bg, make -1, and continue with all
You can see the wrapper make it show below all, but the 1st layer will be first to show on load. Check out my page to see the example.
https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c
OH OH you can’t use the interactions on the same element! You have BG for all 3. You need to add it as a separate interaction - OR - replace the elements for each. Look at that as well!
here’s an updated tutorial I made:
clone the project here: