Stroke Animation · Free Interactions Component
The Stroke Animation component allows you to add dynamic color-filling animations to any part of your Framer project. Whether you want a simple "on-load" reveal or a complex "scroll-linked" progress indicator, this component handles it with high performance using Framer Motion.
Key Features
4 Trigger Modes: Choose between On Load, On View, or On Scroll for precise timing.
Directional Control: Fill from Left to Right, Right to Left, Top to Bottom, or Bottom to Top.
Advanced Animation Types: * Once: Standard one-time reveal.
Repeat/Mirror: Loops the fill or bounces it back and forth.
Continuous: A smooth, flowing "loading" style effect.
Scroll-Driven Power: Sync the fill percentage directly with the user's scroll position.
Fully Customizable: Control colors, transitions, easing, and loop counts directly from the Framer properties panel.
The Stroke Animation component allows you to add dynamic color-filling animations to any part of your Framer project. Whether you want a simple "on-load" reveal or a complex "scroll-linked" progress indicator, this component handles it with high performance using Framer Motion.
Key Features
4 Trigger Modes: Choose between On Load, On View, or On Scroll for precise timing.
Directional Control: Fill from Left to Right, Right to Left, Top to Bottom, or Bottom to Top.
Advanced Animation Types: * Once: Standard one-time reveal.
Repeat/Mirror: Loops the fill or bounces it back and forth.
Continuous: A smooth, flowing "loading" style effect.
Scroll-Driven Power: Sync the fill percentage directly with the user's scroll position.
Fully Customizable: Control colors, transitions, easing, and loop counts directly from the Framer properties panel.
