Stroke Animation

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.