---
title: "Line Animation Pro — Framer component · Best of Framer"
description: "$7.00 · Framer component · by designbydeke · Sections. Line Animation Pro is a precision-built component for animating any SVG path in Framer."
canonical: "https://framer.elliotli.dev/component/line-animation-pro"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Line Animation Pro

# Line Animation Pro

Animate any SVG path

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

![Line Animation Pro preview image 1](https://framer.elliotli.dev/og/component/line-animation-pro/fcd0170f10502a2c/1600x1200.jpg)

## Summary

Line Animation Pro is a precision-built component for animating any SVG path in Framer.

## Description

## Line Animation Pro

Line Animation Pro is a precision-built component for animating any SVG path in Framer. Paste your path, pick a mode, and get a production-ready drawing animation — no extra code needed. Whether you're adding motion to a portfolio, storytelling section, or decorative illustration, this component makes your site feel intentional and alive.

It works seamlessly on canvas, preview, and live — with real-time feedback as you design.

## Key Features

-   **Dual Animation Modes** — Switch between In View (trigger on scroll entry) and Scroll Linked (pathLength tied directly to scroll position).
    
-   **Direction-Aware Re-trigger** — Scroll down draws the line A→B. Scroll back up retracts it B→A. Stays visible when scrolled past.
    
-   **Auto ViewBox Calculation** — Paste any SVG path and the component auto-fits the viewport with smart padding. No manual adjustments.
    
-   **Live Canvas Preview** — Renders the full path directly on the Framer canvas so you always see what you're designing.
    
-   **Fully Customizable Stroke** — Control color, width, and cap style (round, butt, square) from the property panel.
    

## Use Cases

-   Animating decorative lines or shapes in hero and storytelling sections.
    
-   Drawing connectors between timeline or feature blocks on scroll.
    
-   Adding kinetic energy to portfolio or agency landing pages.
    
-   Illustrating user journeys with path-based motion.
    

## How to Use

1.  Paste the d value from your Figma SVG path into the **SVG Path** field.
    
2.  Choose a **Mode** — In View or Scroll Linked.
    
3.  Adjust **Color**, **Width**, and **Cap** to match your design.
    
4.  Enable **Re-trigger** for the direction-aware reverse effect on scroll.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-wd15cny1-utMHBPfnOJzfjdMKsww5HKjRM04Rww)

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

-   All · #8246

## Details

- **Author**: designbydeke
- **Price**: $7.00
- **Published**: 2026-04-15
- **Updated**: 2026-04-14
- **Added**: 2026-03-29
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove