Streaming live at 10am (PST)

Icon Filling Effect

Trying to figure out how to achieve this effect in webflow:

I understand in the article it says the color fill is placed underneath the icons and is fixed so that it follows while you scroll.

I just can’t seem to get it working in webflow, I have the transparent icons ready to go, but am unable to figure out how to get the color underneath to follow while I scroll. Any help would be appreciated.

I think it’s possible with several gradients at the bottom of the screen
— though… admittingly - I haven’t had the time to try it out.

If I get a open time slot… I may try to put a demo together.

Can I get a copy of the icons you were referring to ?

That way… it saves me time making them.

The site with the demo… has other interesting demos as well…


This is the kinda of IX which should be creating with webflow. I hope the webflow team can draw inspiration from this. Nice contribution.

I would probably use a fixed div or section with a default z-index. The top layer of content with the icons would be placed in a relative aligned page wrapper div / section with a higher z-index.

The example uses a negative z-index for the color fill div / section which will give you the same effect with normal content on top, but a negative z-index can cause some unexpected pain if it contains anything with interactions, components, etc. so it limits things a bit if you decide to go further with the layout or interactions.

It is a great and very simple effect.

Look at the image. It’s just a plain image with cut-off lines behind it. I would recommend to simply put a div block of some color beneath it that will be 50% of the browser height. Once you scroll down it will appear in those “lines”. If you hit the certain place on website, you can use javascript to change the background color.

1 Like