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

About

Logo Stroke & Reveal Preloader brings smooth, customizable logo animations straight into your Framer projects. Drop it into your hero section, splash screen, or loading state to give your site an immediate high-end feel. It supports SVG path drawing and image wipe reveals, giving you complete control over how your brand logo appears on load.

What it does

Renders animated SVG paths or image reveals with fine tuned playback controls. It handles view triggers, speed adjustments, and easing curves automatically while letting you set custom delays, replay behaviors, and background styling. The component also features a canvas preview mode so you can see the completed state directly inside the Framer editor without breaking your design workflow.

What you can customize

Source & Mode: Switch between SVG file upload, direct path data, or image reveal modes (including directional wipes).
Playback Controls: Adjust playback state, animation speed, duration, start delay, and easing profiles.
Triggers & Viewport: Set trigger types like In View with customizable visibility percentages and optional replay functionality.
Layout & Style: Toggle background visibility, customize background color, adjust logo scaling, loop options, and canvas preview states.

Great for

Hero sections and splash screens
Brand reveal transitions
Portfolio and agency landing pages
Product launch teasers
Interactive web experiences

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I would love to see what you create.

Need help?

Questions or feedback? Reach me anytime at dulajdilshan766@gmail.com or on X @Dulajweb.

5a:[["$","$L5d",null,{"post":{"id":"019f953c-1d21-714a-bb11-3e1ff4f582ea","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj Design","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"T1HV1TFYNh1b5j0S66cw","resolved":true,"title":"LogoStrokePreloader","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Logo Stroke & Reveal Preloader brings smooth, customizable logo animations straight into your Framer projects. Drop it into your hero section, splash screen, or loading state to give your site an immediate high-end feel. It supports SVG path drawing and image wipe reveals, giving you complete control over how your brand logo appears on load."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Renders animated SVG paths or image reveals with fine tuned playback controls. It handles view triggers, speed adjustments, and easing curves automatically while letting you set custom delays, replay behaviors, and background styling. The component also features a canvas preview mode so you can see the completed state directly inside the Framer editor without breaking your design workflow."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Source & Mode:","marks":[{"type":"bold"}]},{"type":"text","text":" Switch between SVG file upload, direct path data, or image reveal modes (including directional wipes)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playback Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust playback state, animation speed, duration, start delay, and easing profiles."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Triggers & Viewport:","marks":[{"type":"bold"}]},{"type":"text","text":" Set trigger types like In View with customizable visibility percentages and optional replay functionality."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Style:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle background visibility, customize background color, adjust logo scaling, loop options, and canvas preview states."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections and splash screens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand reveal transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and agency landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launch teasers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive web experiences"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Share your build","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I would love to see what you create."}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Questions or feedback? Reach me anytime at "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or on X @Dulajweb."}]}]},"introduction":"Animate logo paths and image","slug":"logostrokepreloader","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj Design","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/019f953b-fcc0-733b-8e2c-9c21a19d0f50.png","metadata":{"tint":{"h":260,"s":51,"l":69},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-24T17:46:12.305Z","updatedAt":"2026-09-03T15:48:58.841Z","publishedAt":"2026-07-24T17:46:12.302Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://logostrokepreloader.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_dtLRvQhpecMeumMBKwwrnAZ3xR2rKzTh97Y9N1UDxrl","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"F19zl5U0OWJLY6QluhrP","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-24T17:46:12.641Z","updatedAt":"2026-07-24T17:46:12.641Z","reported":false}}],"$L5f"]

Suggested for you