fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

February Updates
Currency Converter Cover
Layers Widget

SVG Animation

Using the “SVG animation widget”, you can paste any SVG code and the widget will automatically animate it. You can also customize the delay and duration of the animation and can also style the icons.

Let’s look at each of the options in the “SVG Animation Widget” below.

Install SVG Animation Widget for Elementor

This widget requires Unlimited Elements Free version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “SVG Animation”
  3. Hover over the widget in the search results and click install
  4. Add your “SVG Animation” widget to any Elementor Page

General Settings

1

Insert SVG Code

Insert your SVG code in the box

*Note:- The animation works only with icons that are stroked and not filled.

2

Delay

Set the delay time for animation to start in milliseconds.

3

Duration

Set the duration of the animation in milliseconds.

4

Loop

By turning it on the animation will occur on loop.

Copy SVG Code

You can put any SVG code but The SVG animation widget works best with the Nucleo APP icons pack.

Open the Nucleo App website>>Select icon with outline>>Select any icon>>click on code button

Now copy the SVG code as shown in the below image.

Alternately, you can use Adobe Illustrator to create your SVG.

Step-1

Type any text using the Type Tool>> Get text to the default fill and stroke.

Step-2

Right click on the text and click on create outlines. Go to File menu>>Document Setup>>Click on Edit Artboard

Step-3

Under preset option select the Fit to Artwork Bounds.

Step-4

Go to File menu>>Save As>>Select file type as SVG>>Click on the SVG Code>>Copy the code from the opened text file and paste into the widget.

SVG Animation Widget Styling

You can style the color, alignment, and width of the SVG icon in this section.

Usage Examples

Here are some live use cases for the SVG Animation widget.

Video Overview

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!