ScrollEdgeLine

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

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.