This component visually draws a square outline (like a border) as you scroll between two target sections (fromId → toId). It’s designed for Framer projects and uses Framer Motion’s
Make it with Workshop
Build your own component with AI
Follow these steps to correctly set up the scroll-based border animation.
Add multiple Frames stacked vertically on the page.
Each frame should represent one scroll section (for example: Section 1, Section 2, Section 3).
Make sure the frames are tall enough to allow scrolling.
Select each section frame.
In the Properties panel, find the Scroll Section Field.
Assign a unique ID to each section, for example:
section-1, section-2, section-3
⚠️ These IDs are required.
These IDs are used by the component to track scroll progress.
Wrap all your sections inside a parent frame.
Select the parent frame.
Set its position to Relative.
This ensures the sections remain align while scrolling, allowing the border animation to track progress correctly.
Drag the Scroll Edge Line component onto the canvas.
Create another Frame, which will be parent to both the sections and the srcoll line component
You can wrap the component in a frame
Set the component’s frame position to Sticky.
Set Top = 0.
Select the Scroll Edge Line component.
In the Properties panel:
Set From section ID to the ID of the first section (e.g. section-1)
Set To section ID to the ID of the last section (e.g. section-3)
Adjust:
Scroll Span to control how much scrolling completes the animation
Stroke Width and Color for styling
The border animation will only start once both section IDs are set correctly.
Scroll the page to see the border progressively fill.
If the border does not animate:
Check that the IDs match exactly
Confirm the sections are inside a sticky parent
Ensure the component is absolutely positioned over the frame
The animation will not run until valid section IDs are provided.
IDs can be entered with or without a # prefix.
This component is designed for vertical scroll layouts.
