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.