---
title: "ScrollEdgeLine — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sulaimon.design · Sections. Scroll Edge Line — Setup Guide Follow these steps to correctly set up the scroll-based border animation."
canonical: "https://framer.elliotli.dev/component/scrolledgeline"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ScrollEdgeLine

# ScrollEdgeLine

[View on Framer](https://framer.com/marketplace/components/scrolledgeline/?via=elliot-li)

![ScrollEdgeLine preview image 1](https://framer.elliotli.dev/og/component/scrolledgeline/8840fe271b89cf3f/1600x1200.jpg)

## Summary

Scroll Edge Line — Setup Guide Follow these steps to correctly set up the scroll-based border animation.

## Description

## Scroll Edge Line — Setup Guide

Follow these steps to correctly set up the scroll-based border animation.

### 1\. Create your scroll sections

-   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.
    

### 2\. Assign IDs to the sections

-   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.

### 3\. Set up a Parent Frame (required)

-   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.
    

### 4\. Add the Scroll Edge Line component

-   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**.
    

### 5\. Connect the scroll sections

-   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.
    

### 6\. Preview and adjust

-   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
        

## Notes

-   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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10703

## Details

- **Author**: Sulaimon.design
- **Price**: $5.00
- **Published**: 2025-12-30
- **Updated**: 2026-01-06
- **Added**: 2025-11-11
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove