Scroll arrow

Disappear the arrow with scroll

Scrolling Arrow A scroll-driven arrow indicator that shrinks as the user moves down the page - a subtle, satisfying cue that there's more to explore. The arrow starts at full length and its tail gradually draws upward toward the tip as the page scrolls, disappearing entirely when the bottom is reached. Motion is spring-smoothed for a natural, physical feel rather than a mechanical linear fade. Features Scroll-linked animation tied to full-page progress Spring physics for smooth, natural motion Auto-hides at the end of the page Fully visible in the Framer canvas for easy positioning Zero layout impact — non-interactive and pointer-events free Property Controls Color - match any brand or design system Max Length - controls how tall the arrow starts (50–800px) Thickness - stroke weight of the line and tip (1–20px) Arrow Tip Size - scales the arrowhead independently (5–100px) Scale - uniform scale override (0.1–2×) Best used on hero sections, landing pages, and long-scroll layouts where you want to invite the user downward without a distracting UI element.

Disappear the arrow with scroll