Streaming live at 10am (PST)

Achieve HECO-like Transitions

#1

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: https://preview.webflow.com/preview/expozeur?utm_source=expozeur&preview=c062b70c8e840833af94c821e622501e

1 Like
#2

Hello @expozeur

Here’s a Webflow workshop where @PixelGeek is doing the BG transitions with IX2 > https://webflow.com/workshop/creating-a-background-scroll-interaction-with-interactions-2-0

Hope this helps

Piter :webflow_heart:

#3

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

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.