Loading the page...

WIDGET Documentation

In order to animate your SVG file, you need to make couple of steps:


  • Add SVG file from the settings (apply fill to none but keep stroke active)
  • Name the SVG file if you want to animate several SVG files in one document


additional options

Type option


Delayed - Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.


Async - Each line is drawn asynchronously. They all start and finish at the same time, hence the name async.


One By One - Each path element is drawn one after the other. This animation gives the best impression of live drawing.

Path Function


Linear - the animation has the same speed from start to end.


Ease In - will start the animation slowly, and finish at full speed.


Ease Out - will start slowly, be fastest at the middle of the animation, then finish slowly.


Ease  -  is like Ease In Out, except it starts slightly faster than it ends.


Ease Out Bounce - is like Ease In Out with some bounces.



inViewport - will start the animation once SVG image is visible on the the page.


Autostart - will start the animation at once.