SVG Animate

The SVG Animate widget takes any static SVG file and brings it to life with beautiful eye-catching animations. And since SVG files can be used for text, icons and all types of illustrations, there's almost no limit to the ways you can use this widget to liven up your site.

Not all widget options may work with every SVG file. Some SVGs may have both fills and strokes, while others have one but not the other. If you find that certain widget functions aren't working, it is most likely due to the way the SVG was originally built and saved. In such cases, try a similar SVG from another library or source, or update the SVG in an SVG editor like Adobe Illustrator. You can also try web based optimizer such as https://svgomg.net/.


Preview: https://demo.wocode.com/svg-animate

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site and place it in a row or column where you would like the SVG animation to be seen.

WIDGET OPTIONS

  • Open the widget option panel.

  • Animation Type: There are three types of animations available:

    Delayed: Each outline path is drawn at the same time with a small delay at the start.

    Sync: Each outline path is drawn at the same time in sync.

    One By One: Each outline path is drawn one after the other.


  • Animation Trigger: Sets the animation trigger type. There are two triggers available:

    Autostart: Starts the animation automatically when the page loads.

    When In Viewport: Starts the animation when the animation is within view on the page.


  • Replay Animation On: Sets how the animation will replay. There are three replay options available:

    Disabled: Disables the animation from replaying unless the page reloads.

    Click: Replays the animation if the SVG is clicked.

    Hover: Replays the animation if the SVG is hovered.


  • SVG File: The SVG is selected here. Options include:

    Choose Icon: This will allow you to choose an icon from the included library.

    Upload SVG File: This will allow you to upload your own SVG file.


  • Hide Fill: When enabled, the SVG fill will not be visible within the widget.
  • Animation Duration (Frames): This sets how long the animation takes to complete.
  • Animation Delay (Frames): When the Animation Type: "Delayed" is selected, this setting will be visible and will set how many frames the animation will be delayed by.
  • Animate Fill: When enabled, the SVG fill will be animated.
  • Fill Animation Duration (ms): Sets how long the fill animation will last.

  • Animation Timing Mode: Sets the timing mode of the animation, there are five different modes:

    Linear

    Ease

    Ease In

    Ease Out

    Ease Out Bounce


  • Reverse Animation Order: When the Animation Type: "One By One" is selected, this toggle will reverse the order in which the line paths animate to draw the SVG.

DESIGN SETTINGS

The Design section allows you to customize the look and feel of the SVG animation.

  • Custom Stroke Color: When enabled, you can set a custom stroke color.

  • Stroke Color: Sets the custom stroke color for the SVG.


  • Custom Fill Color: When enabled, you can set a custom fill color.

  • Fill Color: Sets the custom fill color for the SVG.


  • Custom Stroke Width (px): Allows you to set a custom stroke width.

  • Stroke Width (px): Sets the custom width of the stroke line.


  • Custom Stroke Linecap: When enabled, you can set a custom stroke linecap.

  • Stroke Linecap: This will define the shape used at the end of the open subpaths when they are stroked. There are 3 different stroke linecaps to choose from:

    Butt

    Round

    Square

    Note: Linecaps are highly dependent on the SVG type and stroke width, and may not be visible on all SVG's.