Streaming live at 10am (PST)

SVG Animation for Designers


#1

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: http://samherbert.net/svg-loaders/

Or even like that this interactive way: https://tympanus.net/Development/AnimatedSVGIcons/

Ty!


SVG formatting in illustrator
#2

Hi Douglas,

Did you see the Codrops article here - https://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg 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


#3

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:


#4

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


#5

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


#6

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 http://samherbert.net/svg-loaders/. Do you know some way to create that?

Ty!


#7

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.


#8

Exactly!

Let me know if your discover something about, please.

:slight_smile:


#9

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


#10

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


#11

Is exactly that!

You did it just in Adobe Animate? How to?

Is this kind of animation that I looking for.

Thanks!


#12

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


#13

Great man!

Thank you very much for your help.

I'll post here some results soon to inspire.

:wink:


#14

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


#15

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.


#16

Is it possible to add these rings to webflow sites?

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

Thanks a lot.