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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “SVG Animation”
- Hover over the widget in the search results and click install
- Add your “SVG Animation” widget to any Elementor Page
General Settings #
Insert SVG Code
Insert your SVG code in the box
*Note:- The animation works only with icons that are stroked and not filled.
Delay
Set the delay time for animation to start in milliseconds.
Duration
Set the duration of the animation in milliseconds.
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.
