Breath life into your SVG draw

With Animate SVG you can create awesome SVG animations with just 1 click!

Watch the tutorial

Animation "when visible"

You can start the animation once the SVG appears in the viewport or  when the page is loaded. Choose one from 3 different animation effects for your SVG image (Delayed, Synchronized and One by One). The animation always draws elements in the same order as they are defined in the SVG.

Animation "on hover"

You can make your  animation start on the hover over one element on your Muse project  (rectangle, images, text...). It’s very simple: just add a Graphic Style to the element you created and check the option "on trigger action -mouseover". You can also decide not to reveal the SVG draw before the animation starts.

Hover me!

Animation "on click"

This animation starts by clicking one element on your Muse project (rectangle, images, text...). Just choose the drawing you wanna animate, add a Graphic Style and set the option "on trigger action -click". You can hide the SVG drawing before animation starts to surprise your users.

Click me!

Save file as SVG

Use Adobe Illustrator or a similar editor to create your SVG draw. You can also use free online tools to convert .JPG or .PNG icons images into .SVG files.

Reverse animation

You can decide to make the animation start from the first layer of your SVG draw or reverse the direction of the moving so to have it starting from the last layer.

Trigger action (click & hover)

You can make the drawing animation start on the user interaction, click & hover. Just add a Graphic Style to an element on your Muse project and the work is done.

Animation time

Get complete control over the animation timing. You can set the duration of the SVG draw and add delay between the drawing of each path.

Animation effects

Choose from 3 different drawing options: delayed, synchronized, one by one. You also have 4 different animation easing effects for your SVG draw.

Repeat animation on action

You can replay the animation when clicked on or when the mouse hovers over the SVG draw. Decide whether to show on not the SVG draw before the animation starts.

Animate SVG documentation

Find here a complete and simple documentation to understand how to setup and use the Animate SVG widget. Watch the video tutorial at the end to have an overview of the main features and functionalities this awesome tool includes.

How it works

  •  

Breath life into your SVG draw

With Animate SVG you can create awesome SVG animations with just 1 click!

Animation "when visible"

Animation "on hover"

Animation "on click"