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:T9e8,

Line Drawer

Line Drawer is a sleek, modern component that animates SVG paths — either on scroll or through a smooth, controlled animation.It’s perfect for adding dynamic motion to your layouts, storytelling sections, or illustrations, making your site feel more alive and polished.It integrates seamlessly into any Framer project and works perfectly across all browsers and devices, with lightweight performance and full customization.

Key Features

Scroll or Timed Animation – Choose between scroll-based drawing or time-based animation for full creative control.
Custom SVG Support – Import and animate any SVG path effortlessly.
Customizable Stroke – Define color, gradient, thickness, opacity, and easing curves.
Optimized Performance – No dependencies, minimal load, and buttery-smooth motion.
Support Section trigger settings for more complexe scroll animations - you can use only start section trigger, or both start and end section trigger.
replay options
Delay animation

Usage Advice

For the best visual impact, use Line Drawer to guide attention — for example, along a storytelling section, to connect key UI elements, or to animate illustrations.Keep the animation subtle and fluid to preserve your site’s elegance and performance.Try combining it with blur, glow, or parallax effects for an elevated, futuristic feel.

Use Cases

Drawing SVG lines dynamically on scroll for immersive landing pages.
Animating shapes or paths to illustrate a user journey.
Creating eye-catching motion graphics in portfolio or showcase sites.
Adding subtle kinetic energy to minimalist UI designs.

Support

With this component, you get unlimited free support — and yes, I personally answer every emailsIf you ever need a custom animation component or advanced setup:📧 robin.garaboeuf@gmail.com

Tags

animation, svg, motion, path, line, scroll, draw, drawer, effects, ui motion, interaction, line draw, on scroll animation

5a:[["$","$L5d",null,{"post":{"id":"0199f7d6-2c4c-75f8-94dc-2e2525e643b8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SpjVC5bE1mmk965eGHN6","resolved":true,"title":"Line draw SVG ","body":"$5e","bodyJson":null,"introduction":"","slug":"line-draw-svg","author":{"framerUserId":"02799a2f-9034-40f1-ad0d-1db0d88f9880","name":"Robin G","slug":"fliks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/667936/avatar-134isGVWzyq2vTqIuVmzoFDz1JyfSl.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/SpjVC5bE1mmk965eGHN6/line-draw-svg-5wVlE72UqOEBSB3Rqfo0bcgd1VaSga","metadata":{"tint":{"h":210,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-30T14:18:23.009Z","updatedAt":"2025-11-26T01:26:35.003Z","publishedAt":"2025-10-18T15:00:32.460Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://svg-line-drawn-component.framer.website/","price":"2","paymentUrl":null,"workshop":true,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"a4Jqn0kPxF91YUny58Z8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-18T15:00:32.460Z","updatedAt":"2025-10-18T15:00:32.460Z","reported":false}}],"$L5f"]

Suggested for you