A scroll-driven timeline with full-screen colored panels. As visitors scroll, each panel wipes away to reveal the next, while the oversized year text rotates out of view.
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
Items: label, description, big text, background color, text color (add as many steps as you need, minimum 2)
Typography: font family, weight, size, spacing and line height for the label, description and big text, plus label opacity
Layout: frame background, corner radius, frame inset, panel padding (each side), header max width
Scroll: total scroll height and scroll transition (spring by default, or switch to tween for an instant, 1:1 scroll-linked reveal)
Remix or paste the code into Framer
Drag the component onto your canvas and set its height to match your step count (500vh for 5 steps)
Edit your steps, fonts and layout directly in the properties panel
Code component for Framer, not a standalone download
No external libraries to install
Set the height to roughly the number of steps × 100vh for even pacing
Animation runs in Preview and on the published site (the canvas shows a static view of the first panel)
Comes with 5 sample steps so you can see it working right away