Streaming live at 10am (PST)

Smooth Background Transitions with Interactions 2.0


#1

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)


#2

Hey @helmsmith !

I think it’s easier with a while page is scrolling interaction like I did on this site:

You can play with the % to make the interaction quicker (ex. change color from 20% to 21% of the page)


#3

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.


#4

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?


#5

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.


#6

Just to demonstrate what I want to achieve, here’s a test with the background transitions working perfectly in Interactions 1.0.


#7

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.


#8

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.


#9

@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!


#10

Please check out this bare bones example to see the structure and interactions set up.


#11

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?


#12

Sure.


#13

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.


#14

You can see in mine now, a background fade happens but it seems to be at a random placement and with no consistency.


#15

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 :slight_smile:


#16

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.


#17

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.


#18

Great! Keep up an excellent work at heco, I am your fan since I saw you on awwwards! :smiley: