Scroll Line Progress

A Line, an SVG element, that animates and fills as you scroll

The path follows the scroll

If you look closely, you can see the path is being animated.

The path follows the scroll

If you look closely, you can see the path is being animated.

The path follows the scroll

If you look closely, you can see the path is being animated.

Recently, I built out the landing page for Cursor - An AI powered code editor. There I had to implement a rather fancy SVG Path Animation that follows the scroll when the user scroll.

The easiest way I could replicate it was by using Framer Motion. I have used Framer Motion in the past and it is a great library for animations. It is also very easy to use and has a great API.

Code Snippet

We need your help 🫶

We are a tiny team of people who could use your support in building these awesome components. Please share Aceternity components on your social media and help us grow. 🙏

Tweet about aceternity

Ready to bring your website to life?

Experience the magic of a stunning website designed just for you! Contact us now, and witness the transformation within 24 hours. No more waiting around - we're serious about making your vision a reality. ✨

John Shahawy
Henrik Söderlund
John Ferry
Meru Gokhale
Book a Call