I know its too soon since IX 2.0 its so new but I have been unable to perform a change bkg on two sections. Looks like the wrapper is not being taken as such.
Basically I’m trying to make a scroll to another color like, for instance, coda.io does.
Can not realize what I’m doing wrong.
Here is my public share link: https://preview.webflow.com/preview/scroll-127ae5?preview=381ad7e3f29950c55a5005c772d8362c
Just a note… you don’t actually need IX2 for this… I followed this workshop and it worked great:
Webflow Workshop #70: Creating a background scroll interaction in Webflow
It took me a little bit to understand how it happens… but it’s that bottom layer and making them all fixed using z-index… it’ll make more sense than interactions… If you follow this… Nelson is excellent at explaining the logic. Take care.
Thanks Gary but its different. In the example (coda.io) you can see that you have control of the background change as you scroll up or down. With ix 1.0 you just “toggle” a change.
Okay I see it… so when you mean background change do you mean other items, or just the section bckg color?
Okay here’s my sample actions site… it’s the background scroll page… it does that. Check it out.
https://preview.webflow.com/preview/gj-project-1?preview=924bea4737f9103322cb65923cee8987
As you can see there is no fade between one section to another. It just toggles off one color and turn on another.
Ahh gotcha… you’re talking about the smooth blend into the next section… ok… I just changed the timer and it blends softer now. It was 200… try 750 or 950 that seemed to work.
Thanks Gary but sadly is not the same effect. By delaying we are just delaying the transaction but you dont have control over it. If you head to coda.io you can see what I mean. It’s easier that way I believe.
Hey @anibalin
You can accomplish what you are wanting to do by creating a fixed full height/full width div with a negative z-index, and then using Interactions 2.0 to change the BG color of that div on scroll. I don’t have a ton of time right now to go into more detail, but please reach out if you would like help!
It may go without saying, but all other divs must have a transparent background in order to see the result since there is a negative z-index set on it.
The problem with your example (the public link you shared) is that you target sections’ wrapper while you should target your sections in the bg change interaction. Meanwhile no matter what bg colour your wrapper takes it is always underneath the section anyway and you cannot see the change.
looks like it works!
however, there seems to be a glitch or something. Wondering if its a bug.
The thing is that with preview on it works properly but as soon as you preview it text hides when scrolling.
Wierd.
https://preview.webflow.com/preview/scroll-127ae5?preview=381ad7e3f29950c55a5005c772d8362c
Sadly I could not make that method work. Do you happen to have a live example to look at? willing to understand it.
Thanks for sharing.
Didn’t you say Spencer’s example made the trick?
Here is another idea just in case:
You need to create a wrapper that will serve as a scrolling container (the 100vh sections with content should be inside).
Paste a fixed div into it and make sure it has lower z-index than your content sections ( fixed div should have a height of 100vh, and 100% of width), this div will act as a background that change colour.
Then just create scroll animation on the wrapper that will target the fixed div. And simply create points of bg change on the timeline (since your sections are of a screen height height you can just divide the timeline into the amount of section to set points of change - 33% if there are 3 sections, 50% if there are 2 sections etc).
This will give you a framework with which you will be able to fiddle to come with the final design.
edit: oh, didn’t see your edit. OK, anyway, let this stay.
That was very clever. Thanks for your insight. I got it working.
Good to know you did!
