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
YOUR ANIMATION IS READY! Preview it!
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.
Start
inViewport - will start the animation once SVG image is visible on the the page.
Autostart - will start the animation at once.