Does anyone know how I can achieve transitions more like this site? https://www.helloheco.com/
I have attempted such but failed. This webpage was very much inspired by the site above. Hopefully one day it can be built out even moreso.
Here is my public share link: Webflow - Expozeur
Hello @expozeur
Here’s a Webflow workshop where @PixelGeek is doing the BG transitions with IX2 > Creating a background scroll interaction with Interactions 2.0 | Webflow live stream
Hope this helps
Piter 
I followed @PixelGeek’s IX2 BG transitions demo, but the video doesn’t show a background for the first section (it’s the default body color in the demo, whereas Heco’s uses an mp4). When I put an image (or unique background color for that matter) as the background for the first section, it doesn’t load when the page loads. (This is because the initial state is set to Opacity 0%/Display None, but if that weren’t the case the background image would appear when loading the page on other sections — when refreshing the page after having scrolled, for example).
How can I give a background to the first section, having it appear before any scrolling, and not have it appear over other sections when the page is loaded already scrolled part-way down the page.
Is there any way to do this without custom code?
Here is another example from Heco (a different site they worked on):
https://webflow.com/website/oncorps-webflow-staging
If you open the site in Webflow and preview the page, the initial background doesn’t appear until a scroll action is performed. But if you view the published site, it behaves correctly. This leads me to believe they used custom code.
Hey Andy! Did you have any luck on how to achieve a background for the first section? I’m stumped on the same problem. Thanks!
Hi @Andy3
From what I understand, you need the first section to have a separate background, and you want it to disappear/hide and be replaced by other backgrounds as you scroll down to the consequent sections, right?
This is definitely possible and I think, quite easy to do on Webflow. Once you confirm, I’ll go into the details and try my best to explain how it can be achieved. Please correct me if I’m wrong.
Cheers,
Aditya
Hi Aditya,
I think this is correct — it seems Andy and I ran into the same problem with this tutorial. Would love your assistance on this if you know how to do it!
Best,
Stephanie
Since there’s no preview link for me to demonstrate, I’ll just try to explain verbally. If you look at HECO’s website, the first section background changes the very moment the second line of the paragraph “Heco is a design studio…” starts scrolling into view from the bottom.
Background when only the first line has scrolled into view: https://i.gyazo.com/212522fe6640705e40007d9aad5692cf.png
Background when the second line has scrolled into view: https://i.gyazo.com/64e9ea7b2dd24fb909ab5124df69bdf5.png
All they’ve done, is that they’ve placed two divs, one on top of the other, position fixed, 0px from top, and 100vh/100vw in height and width. Both are direct children of body. One of the divs has the light wavy background that you see when the page first opens, and another div on top has the dark background with patterns, but this dark background div is initially hidden, with opacity set to 0.
They’ve added a “while page is scrolling” interaction on the page, so that when the page scrolls down by, assuming 7%, the div with the light wavy background goes from opacity 100 to opacity 0, and the div with the dark background goes from opacity 0 to opacity 100.
Once you scroll down to about 15% of the site, the dark background disappears and you get a plain white background, which then eventually changes to light blue and so on. They’ve done this by changing the dark div’s opacity back to 0 after scrolling down 15% of the page, in the very same “while page is scrolling interaction”, and from that point onwards, they’re simply affecting the background color of the body like PixelGeek has shown in one of his tutorials.
I hope I didn’t too a terrible job explaining! If you can provide a preview link of any project I can try to demonstrate it in there for you, in case you can’t figure it out.
Hope that helps.
