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,
Luke

https://preview.webflow.com/preview/lukes-stupendous-site-865c80?utm_medium=preview_link&utm_source=designer&utm_content=lukes-stupendous-site-865c80&preview=8190ecd45925dfded0fb4d586d20021a&workflow=preview

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”.

https://preview.webflow.com/preview/lukes-stupendous-site-865c80?utm_medium=preview_link&utm_source=designer&utm_content=lukes-stupendous-site-865c80&preview=7828a8ff43cdfb60089c1b56c0685ae4&workflow=preview

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

image

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:

sticky-line-cover

1 Like

Hi @mikeyevin,

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

1 Like