SVG Animation for Designers

Hi guys!

Do someone know a “Designer” way to create SVG animations? This is painful for us that don’t know too much about code and GIFs are to weight and limited about colors and resolution.

Something like this: SVG Loaders - Sam Herbert

Or even like that this interactive way: Animated SVG Icons: Using Snap.svg to animate SVG icons

Ty!

2 Likes

Hi Douglas,

Did you see the Codrops article here - Animated SVG Icons with Snap.svg | Codrops which show how to make them?

Admittedly there’s a bit of work to them but nothing too difficult if you have some basic graphics knowledge. If you don’t then there are quite a few on the internet at various places that you can just download.

Are you looking for a specific design or creating your own then or are the ones like those on Codrops anything like what you might be after?

Best wishes,

Mark

1 Like

Hi Mark!

I was looking for something more visual and less command line. Maybe like Flash was.

I don’t have a specific demand right now, it was only to open the possibilities for my designs.

But thanks for your tip! :slight_smile:

1 Like

Try Tumult Hype. For anything a little complex, it’s really cool, and visual.

2 Likes

Beat me to it. Hype is fantastic for that sort of thing definitely.

Hi Vicent!

Really nice tool, but it just export html/css/javascript files, something like Edge Animate do. To create this kind of animations I think that Webflow Interactions fits perfectly. I was thinking in SVG animation properly like this SVG Loaders - Sam Herbert. Do you know some way to create that?

Ty!

TIL that animations can indeed be stored into a single SVG file… I was looking to do that but never came across SMIL. Although it’s not at all supported on IE and Edge.

Interesting, going to look for a way to produce those.

1 Like

Exactly!

Let me know if your discover something about, please.

:slight_smile:

As far as I know Adobe Animate (Formerly Flash) can do this using SnapSVG Animation from GitHub.

There are quite a few other options too listed on this page here

Also just found Radi and for static SVG (at least I don’t think it supports animation) there is also Boxy SVG which is free.

Hope that helps a bit.

Best wishes,

Mark

1 Like

Okay It’s been a very very very long time since I used Flash (now Adobe Animate) so please don’t laugh at this but I just put together a very very simple loader animation using Adobe Animate. Only took a couple of minutes and I’m pretty sure it’s the kind of thing you’re looking for?

If so then I’d highly recommend using that if you have it.

Best wishes,

Mark

2 Likes

Is exactly that!

You did it just in Adobe Animate? How to?

Is this kind of animation that I looking for.

Thanks!

Hi douglas,

Yes that was done entirely in Adobe Animate and then exported using the freely downloadable SVG Animation Extension for Adobe Animate which allows you to export animations to SVG files.

It’s a very very simple timeline animation that I did, frame by frame and I’m absolutely positive that it could be done using Actionscript in probably about 3 seconds but I was pushed for time and not able to get back into learning AS again :wink:

As you can see from the GIF below it was very very simply made by me. It’s entirely possible to make the more advanced loader type animations that you see on the internet though. Pretty much anything you can think up really.

Best wishes,

Mark

2 Likes

Great man!

Thank you very much for your help.

I’ll post here some results soon to inspire.

:wink:

No problem. Please do, looking forward to what you make.

My efforts were very very 1990’s!! :smiley:
(Been a while since I ventured into that app)

Best wishes,

Mark

I agree with @vincent about Hype. I love it and use it all the time. But for SVGs it’s a no-go. It does not currently export SVG.

While not yet released, I have my eye on Spirit (https://spiritapp.io/). It looks like it could be the missing piece many of us need.

4 Likes

Is it possible to add these rings to webflow sites?

http://samherbert.net/svg-loaders/

Thanks a lot.

Another solution that’s available is Keyshape. It’s like Tumult Hype but can export vector SVG.

Am I the only one surprised that no-one said anything about SVGator? Yes, I know they are still missing key features (or functionalities), but hey - it’s a new project guys, for us, for designers = meaning that it doesn’t require any coding skills and exports a single svg file :slight_smile:

They even stated that before launching the project, that they want to encourage the extensive use of svg animations on the web, especially designers.

3 Likes

If nobody mentioned a Lottie in the subject, then I will do it)

And free svg library: https://lottiefiles.com/

4 Likes

Thanks for sharing! :100: