LineScroller is a Framer code component that animates a vertical line as your visitor scrolls, highlighting each service as the line passes it. The result is a cinematic reveal that keeps people reading all the way to the bottom.
As your visitor scrolls, a glowing vertical line grows down the page. Each service title and description fades in at full opacity as the line reaches it, while the others stay dimmed. It's subtle, elegant, and incredibly effective at directing attention.
LineScroller.tsx — drop straight into Framer, no setup needed
Scroll-linked animation via Framer Motion's useScroll
Fully customizable via Framer's property panel — no coding required
Add, remove, or rename services directly in Framer
Control line color, text color, font size, column gap, and opacity
Line break support in titles — split any title across two lines
Responsive — single column timeline on mobile, two columns on tablet and desktop
Hardware-accelerated performance — buttery smooth on all devices
No external dependencies
Designers and agencies building service pages, portfolios, or landing pages in Framer who want something more memorable than a plain list.
Framer
Works with any Framer template
One-time purchase. Use on unlimited personal and client projects.