Using the free “SVG Animation Widget” for Elementor, 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.
Elementor SVG Animation Tutorial Video
Add a Free SVG Animation 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 for Elementor SVG Animation
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 for Elementor SVG Animation
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.
Widget Styling for Elementor SVG Animation
You can style the color, alignment, and width of the SVG icon in this section.
Usage Examples of Elementor SVG Animation
Here are some live use cases for the SVG Animation widget.
SVG Animation Live Examples.
Thank you for exploring the SVG Animation Widget for Elementor! With its smooth and engaging animations for vector graphics, this is the best SVG Animation Widget for Elementor, perfect for creating dynamic and visually appealing websites. We hope it adds a unique flair to your designs. If you have any questions or need assistance, feel free to reach out.
