About Scroll Pathline
Pathline – Scroll-Drawn Milestone Timeline with Text Reveal
A glowing path that draws itself as visitors scroll. Each milestone lights up as the path reaches it, and its description reveals word by word. Add your own steps, drag them into position, and match the look to your brand with one accent color.
What you get
Full source code (.tsx), ready to paste
Framer remix link with the demo project
README with step-by-step setup
Free lifetime updates
Support within 24 hours
Customizable
Content: milestones (label, description, X and Y position, text side above, below, left or right), up to 10 steps
Layout: path curve, dot size, halo size, dot-to-text gap, label-to-description gap, description max width
Colors: accent (path, dots and glow), background, track, idle dot, label text, description text, head dot
Typography: label font and description font, each with its own size, weight and line height
Path: stroke width, glow, dotted or solid track, track width
Interaction & Motion: wheel speed, dot pop scale, text reveal lead, idle label opacity, glowing head dot on or off, smooth spring-based progress
How it works
Remix or paste the code into Framer
Drag the component onto your canvas
Edit your milestones, positions, colors and fonts directly in the properties panel
Good to know
Code component for Framer, not a standalone download
No external libraries to install
Scroll with the mouse wheel, trackpad or touch while over the component to draw the path. Once it is fully drawn or fully empty, the page scrolls on as normal
Interactive scrolling and text animation run in Preview and on the published site (canvas shows the finished timeline as a static view, so you can position everything)
License: Unlimited personal and client projects. No resale or redistribution.
Refunds: Not working? Email us first and we’ll fix it within 24 hours. If we can’t, you get a full refund.
Questions? support@russetsupply.com
