Recreation of Notion's line spacer interaction?

I’m trying to recreate the scroll animation on line spacer of their blog main page (in the middle-ish of the page) but I am new to Webflow and can’t quite get it right. I have included my read-only share link below and a link to Notion’s blog.

All the best,

Howdy @Luke_Williams and welcome to the community :wave:

You actually don’t need any scroll animations to get this working — the effect is created by simply covering up the top portion of the divider line so it appears to shrink while the user scrolls.

I inspected the Notion site and they’re using an :after psuedo-class that positions a div over top of the line:

Unless you wanted to use custom code (to mimic the exact solution seen above) you can simply make sure the parent element has position: relative, create a new element and set it to position:absolute, and then change it’s position so it covers up the divider along the top.

If you run into issues while getting that setup, don’t hesitate to reach out! :+1:

Hi @mikeyevin, thank you for your help and the warm welcome!

I am running into a couple issues with the setup. Namely; keeping the dive blog in place so it doesn’t rise on the scroll (I would’ve used sticky positioning normally but have set that to absolute).

I’ve included a fresh read only link below. The element I am using as a cover is named “div 17”.

If you nest the div 17 element within the Div Block container — the one that “sticks” on scroll" — then it will follow right alongside:


After that, you just need few adjustments to the style on the div 17 element to help it align (and match the background color):

When that all comes together, this is what you get:


1 Like

Hi @mikeyevin,

I can’t tell you how happy that makes me. Thank you.

1 Like