Animated SVG in Elementor

I ❤️ SVG's
but you know what i love more?
Animated SVG's 💪
The SVG icon pack i am using in the video is this one
nucleoapp.com/...
What i love about SVG's ???
1. They are in vector format so they are super crisp in any type of screen even retina.
2. You can edit their colors without needing to open any graphic design software.
3. You can animate them automatically.
This is a quick tutorial of how to integrate animated SVG's in your Elementor Projects.

[@jodorgu8640]

Really nice feature. I'm loving the tutorials it's really upped my Elementor game 🙂

[@UnlimitedElements]

thnx Jo i am glad you found it usefull

[@thomasandreasparpoulas9544]

you conveniently failed to mention that this costs $39/year

[@UnlimitedElements]

hey thomas you are right i turned it back to free you will see it tmrw

[@nikoladivac1488]

@@UnlimitedElements now is $99

[@SucessoempreendedorMD]

I loved it !! ... every day I like this plugin and the different possibilities it provides :)

[@franktielemans6624]

Lovely!
I'v used Vivusinstant for this, but this is way easier.
I nice addition to this widget could be an option to trigger the animation on hover instead of appearance in the viewport.

[@UnlimitedElements]

i think it might be possible do you know a little bit of js ?

[@franktielemans6624]

@@UnlimitedElements
not much, but It seems you need to add code in the svg code to make it animate on hover.
ua-cam.com/video/yEQo7R4c-_o/v-deo.html
edit:
Nope it doesn't work that way, I guess the drawsvg.js overrides any inline svg code.

[@advanced-developers]

Good

[@RickWolfff]

I draw my own SVG icons in Illustrator. Where do I go to impart animation like this?

[@buksohn]

So awesome!!

[@dushantmanglurkar4996]

Can you recommend any open source platforms for svg animations? I can't afford premium icon pack from nucleo for my project. Thanks in advance.

[@bySterling]

So awesome! Will download your plugin tonight! Curious if you might know what to add to the code so the animations repeat everytime you scroll up or down an SVG embedded row ?

[@jdoubla]

Did you get the animations to repeat?

[@bySterling]

Zach Springer no man, no idea how as CSS is not my thing (unfortunately!)

[@Creative-jg6gq]

How do you export the code from Illustrator ????

[@manurecaok]

4 months late but for anyone wondering, just copy the vectors right from Illustrator. You'll have the code copied in your clipboard. You can even send logos this way in a notepad file.

[@viimoura]

It work but my svg is dont in center, it like in the side column (already try position for this but dont change position of the svg animation)

[@nericolon5983]

lol, u are my clone :V

[@anilreddy7833]

Hi! It's working for me in the elementor editor page but NOT working on the page.

[@ichallenge4505]

you can open a ticket unitecms.ticksy.com/

[@viveksaini9809]

sir my SVG icon not Animated in i am using chrome Browser

[@UnlimitedElements]

is it stroke or fill ?

[@viveksaini9809]

@@UnlimitedElements sir i dont know Strok or fill i am just add icon form where you are ataching. Some Icon work somedid not work why sir. Help me

[@UnlimitedElements]

@@viveksaini9809 make sure its a stroke icon and not a fill icon since fill icons can not animate

[@viveksaini9809]

@@UnlimitedElements thanks sir for reply

[@juliansmith4803]

haha... so now it only on the pro versi0n... that's misleading.. you should amend this video.

[@UnlimitedElements]

hey Julian you are right i switched it back to free you will see it tmrw.

[@elladagan5287]

it doesn't work... I did exactly as described :(

[@UnlimitedElements]

are you using a stroke svg or a fill one ?

[@elladagan5287]

@@UnlimitedElements stroke.

[@UnlimitedElements]

@@elladagan5287 please send me the svg to mail i will check . [e-mail]

[@avi661]

@@UnlimitedElements me to same problem

[@UnlimitedElements]

@@avi661 hi avi you can talk with me on fb dont be shy - i would love to help you