Stroke Animation: Free Interactions Component by Iklil Najma Muqtafa

Marketplace Components Categories Interactions

A powerful component to create smooth fill animations in Framer. Easily trigger transitions on load, view, or scroll. Supports directional fills (L/R/T/B) and advanced loop modes like Mirror and Continuous for unique progress and reveal effects.

About this 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.