---
title: "Stroke Animation — Free Framer component · Best of Framer"
description: "Free Framer component · by Iklil Najma Muqtafa · Interactive. The Stroke Animation component allows you to add dynamic color-filling animations to any part of your Framer project."
canonical: "https://framer.elliotli.dev/component/stroke-animation"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Stroke Animation

# Stroke Animation

Animate fill transitions & scroll effect

[View on Framer](https://framer.com/marketplace/components/stroke-animation/?via=elliot-li)

![Stroke Animation preview image 1](https://framer.elliotli.dev/og/component/stroke-animation/fd88a043046ba5ee/1600x1200.jpg)

## Summary

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

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2489

## Details

- **Author**: Iklil Najma Muqtafa
- **Published**: 2026-02-18
- **Updated**: 2026-10-05
- **Added**: 2026-02-15
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step