5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8a6,

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

Paste the d value from your Figma SVG path into the SVG Path field.
Choose a Mode — In View or Scroll Linked.
Adjust Color, Width, and Cap to match your design.
Enable Re-trigger for the direction-aware reverse effect on scroll.

5a:[["$","$L5d",null,{"post":{"id":"019d8ec5-ec31-728c-8625-e4b31bd9f0f8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bf0c55e-e9d0-46b5-8a86-f54e210c6d6d","name":"designbydeke","slug":"designbydeke","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46516/avatar-pbEXVVmTk3kAhRyNOsqxLA61RYj2Tk.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"lRPqY7OGKHcxfI96PDiN","resolved":true,"title":"Line Animation Pro","body":"$5e","bodyJson":null,"introduction":"Animate any SVG path","slug":"line-animation-pro","author":{"framerUserId":"0bf0c55e-e9d0-46b5-8a86-f54e210c6d6d","name":"designbydeke","slug":"designbydeke","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46516/avatar-pbEXVVmTk3kAhRyNOsqxLA61RYj2Tk.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/lRPqY7OGKHcxfI96PDiN/line-animation-pro-dTGHwuVqoYvOrSOnqHysli9pr8MQS9","metadata":{"tint":{"h":206,"s":89,"l":54},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-29T05:40:35.451Z","updatedAt":"2026-04-14T20:09:09.698Z","publishedAt":"2026-04-15T01:33:48.977Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://lineanimation.framer.website","price":"7","paymentUrl":"https://buy.polar.sh/polar_cl_Z37kpag2RZcjOPdjXlVK7zH7F5dq41KBOokQF3GnCX2","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"eYLN9lwMvyTzq22cFszP","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T01:33:48.977Z","updatedAt":"2026-04-15T01:33:48.977Z","reported":false}}],"$L5f"]

Suggested for you