Welcome to the SVG Draw Widget

The Muse For You SVG Draw Widget allows you to animate your SVG images by drawing them in real-time on load, hover, click, or scroll.

After installing the widget, you will have 2 widget options to choose from in the Library Panel (Window > Library) along with their respective 'Add First' widgets -

  • SVG Draw - Add First
  • SVG Draw Widget
  • SVG Draw - Add First - With On Scroll
  • SVG Draw Widget - On Scroll

01

Using the widget and initial steps

INSTRUCTIONS

Note: The SVG file cannot have any fill. It can only be strokes of an image. In Adobe Illustrator, you can easily clear the fill by selecting none in the fill section.

Click here to see how to create your SVG file

After placing the 'Add First' widget, drag the 'SVG Draw' or 'SVG Draw - On Scroll' widget onto your website. You can resize the widget using the built-in Adobe Muse 'Resize' option and set it to responsive width, stretch to browser width, or none.

Open widget options. In first section, enter in an instance number. Each new SVG image must have a unique instance number.

In second section that says 'SVG Image', add your SVG file by clicking on 'Add File'.

02

Choose from 3 different animations

FEATURE #ONE

You can draw your SVG in 3 different ways - Delayed, Async, and One By One.

02 / Async

Draw all your SVG elements asynchronously. All your SVG elements will come in together. The delay option does not work on the 'Async' and 'One By One' drawing.

Note: Depending on how your SVG is grouped is how your SVG will draw. So if specific sections of your SVG are grouped, the widget will know that and draw it accordingly.

01 / Delayed

Gives your SVG a specific delay in the way it draws. In 'Options' section within widget options, you can set the 'Delay' in frames (200 frames is about 3 seconds)

03 / One By One

This option allows you to draw each section of your SVG one at a time. You can specify how long you want the animation to last for in the 'Duration' field. This option is also in frames.

03

Choose from 3 different options for animation start

FEATURE #TWO

There are 3 options to start your SVG Draw animation - Autostart, Manual, and In Viewport.

Autostart - Start your SVG draw animation immediately when the user goes to the page.

Manual - Manually start the SVG draw animation. If you select manual you will have to input some code into Adobe Muse that looks something like this:

<script>

svg1.play();

</script>

InViewport - Start your SVG draw animation when the SVG is visible in the browser screen. Works great if you have different SVG images lower in the page and you want the user to to see the SVG draw when they scroll to that part of the page.

Make Better Websites, Starting Today.

All access pass for only $49/year.

Have questions about our products?

We are here to help.

Tutorials

Subscribe

Browse Widgets

Tutorials