SVG Animator

Transform static icons into captivating animations. The SVG Animator widget for Elementor allows you to animate SVG paths with a “drawing” effect that feels creative and high-end.

This widget comes free with WPMozo Addons Lite. To use it, simply install and activate the free version of plugin.

Overview

Animations don’t have to be complex to be effective. This widget focuses on path-based animations, allowing you to draw outlines of logos, icons, or custom illustrations as the user interacts with the page.

How to use

• Locate the “SVG Animator” widget.
• Upload your .svg file or paste the SVG code directly.
• Select an animation trigger (Load, Hover, or Scroll).
• Adjust the stroke width and animation speed to get the perfect draw effect.

Content settings

• SVG Source: Upload your .svg file or paste the raw SVG code for maximum control.
• Animation Type: Select the animation behavior: Draw (outline), Fade In, or Scale Up.
• Trigger Events: Choose when the animation starts: On Load, On Scroll, or On Hover.

Style Settings

Stroke Styling

Customize the lines that form your SVG drawing animation.

• Color: Choose the color of the drawing path.
• Stroke Width: Adjust the thickness of the lines being drawn.
• Stroke Opacity: Set the transparency of the animation paths.

Animation timing

Fine-tune how long the drawing animation takes to complete.

• Duration: Set the total time for the drawing process in seconds.
• Delay: Add a delay before the animation starts after the trigger.
• Easing: Choose the acceleration curve (Linear, Ease-in, etc.) for the animation.

Fill and sizing

Control the final look and size of your SVG.

• Final Fill: Optionally set a color to fill the SVG shapes once drawing is done.
• SVG Dimensions: Responsive width and height controls to scale your icon.