Stroke Animation

The Stroke Animation component allows you to add dynamic color-filling animations to any part of your Framer project.

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.

Animate fill transitions & scroll effect