Path Section Follow
This component animates a colored section that travels along any SVG path you provide. The animated section moves from start to finish along your custom path
Make it with Workshop
Build your own component with AI
This component animates a colored section that travels along any SVG path you provide. The animated section moves from start to finish along your custom path
Make it with Workshop
Build your own component with AI
This component animates a colored section that travels along any SVG path you provide. The animated section moves from start to finish along your custom path, with full control over timing, easing, and visual styling.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy and paste the Path Section Follower component into your Framer project file
Paste your SVG path data (or complete SVG code) into the "Path" property - you can use tools like Figma to export SVG paths
Configure animation settings including Duration (how long the animation takes), Start Delay (wait time before starting), Easing type (movement style), and Loop (whether to repeat)
Customize the animated section appearance by adjusting Length (how much of the path is visible), Thickness, Color (enable "Switch Colors" to change color at the midpoint), Opacity, and Cap/Join styles
Toggle "Show Path" on or off to display the underlying path guide, and customize its Color, Thickness, Opacity, and Dashed style if visible
The component animates a section of a path you define using SVG path data or complete SVG markup. You control the animation timing with duration, start delay, easing type, and looping options. The animated section's appearance is customizable through length, thickness, colors, opacity, and line styles. You can also display the underlying path with its own styling to show the full route the section will follow.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
