Well this is embarrassing.
Having some curious trouble with Interactions 2.0. I’m trying to recreate the smooth background fades between sections we did on our own website with no trouble in Interactions 1.0.
I’ve recreated it almost exactly as I did in the original, but for some reason the backgrounds will not transition. Any ideas?
EDIT: Removed staging link as the issue is fixed. Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey @helmsmith !
I think it’s easier with a while page is scrolling interaction like I did on this site:
https://webflow.com/website/Event-One-Pager
You can play with the % to make the interaction quicker (ex. change color from 20% to 21% of the page)
Yeah that’d be an okay fallback. Not ideal though since page length can continue to change during the build and in the future, requiring the percentages on the interaction to change. Not hard, just a little less accurate.
This is what I get if I delete your backgrounds and set the interaction on the section’s background color instead. Is that what you’re looking for?
Thanks, not exactly. I don’t want to see section breaks at all, so the backgrounds need to be fixed and full-screen. Also, the “backgrounds” need to actually be divs that may contain content. Transitioning background-color alone isn’t what we’re looking for.
Just to demonstrate what I want to achieve, here’s a test with the background transitions working perfectly in Interactions 1.0.
Hey @helmsmith
Here’s how I would try setting it up with the idea of keeping the flexibility to add/remove sections in the future without needing to adjust interactions every time.
<section>
<containter>
<bg>
Make the bg element position:fixed and 100vw 100vh. It should be a child of the section element. Make sure to increase the z-index of the container to be above the bg.
Create a “while scrolling in view” interaction on the section class. Make sure to apply to all elements with this base class. In the interaction, animate the opacity to reveal the background when that section is in view. Adjust the scroll offsets and scroll% animation to get the timing/feel that is desired.
Now that is setup. Create as many sections with backgrounds as needed. Use a combo class on each bg to adjust the color or bg image. Such as .bg .blue and .bg .black
Now you have a single interaction for all bg elements no matter if any are removed or added in the future. Hope that helps. Let me know if I need to further explain.
This is how I’d do it as well, with the small change of not using “while scrolling” but “scroll into view” so that the effect is exactly the same as on the old version.
@dram @matthewpmunger Thanks for the help! I’ve updated the project per your directions… definitely cleaner code, so I appreciate that. Unfortunately the background transitions still aren’t triggering. I have the interaction applied the .home-BG-section section class, and set it to apply to only .home-BG that are children of the section (so all the backgrounds aren’t transitioning at the same time).
Let me know if there’s something I’m missing if you don’t mind. Thanks again!
Hey thanks, it looks like it’s exactly how mine is set up. I’m not able to see yours in action. Do you have a published link?
Yeah I don’t get it. I’ve literally stripped my build of everything not required for this animation, so it’s essentially as bare bones as yours, with the exact same interactions and structure, and it still just won’t work.
I think something is just bugged in my build. I feel like I’ll have to start from scratch. This is frustrating.
You can see in mine now, a background fade happens but it seems to be at a random placement and with no consistency.
No problem, I got you, fam
the reason is that you selected multi-class inside your ix. Make sure to first create “home-bg” class, set up ix, tell it to affect only children, and THEN add “bg-1” multi-class to the class. It will work 
I think Webflow devs need to add multi-class names inside interactions builder, this is a mistake I did myself several times and it is indeed frustrating to figure out.
THANK YOU. Yeah that’s incredible unintuitive. It didn’t show that it was a multi-class selected, just the main class… I didn’t realize. Looks like it’s working as intended now.
Great! Keep up an excellent work at heco, I am your fan since I saw you on awwwards! 
As others on here I got frustrated as the new UI didn’t match up with the video that nelson for 2.0. Here is the solution using interactions 2.0 new interface. For the background transition.
Maybe someone has found a better way of doing this besides creating an interaction for each section but because the backgrounds are not children of the sections there does not seem to be a way to use the class selector in a single interaction.
Duplicating the interaction is pretty easy, then it is just a matter of changing the target to the correct bg.
The share link is https://preview.webflow.com/preview/trm-assets-copy?utm_source=trm-assets-copy&preview=e92f1bf501de2c51af5da71e6d585013
The page is background transition
working link
https://trm-assets-copy.webflow.io/background-transition
always
Jeremy
Thanks do you have the webflow page for this so I can see how the inetractions are set?
doesnt seem to work
Thanks