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.
100vh. It should be a child of the
section element. Make sure to increase the z-index of the
container to be above the
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
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.