over 3 years ago from Erik Fanki, UI/UX Designer @ Äventyret
I'm looking for a tool that generates animated SVG:s from my Sketch vector layers. I have been testing Lottie + AfterEffects, it works - but it's quite a messy process. Is there any tool that is a bit more lightweight and aimed for this specific purpose? I still wanna work with keyframes and such. I appreciete any input! Cheers.
Animator (previously Haiku) is a newish tool that focuses on making animations for web. It's pretty robust and the team is very active on their Slack channel and with updates.
Animator is great. Honestly one of the easiest ways to do production ready web animation. The integration with design files is really solid and makes reworking small elements so easy.
Best one I've used is SVGator https://www.svgator.com/
It's not great but on the other hand I haven't found nothing that comes close to this :/
without a doubt the best one I've come across as well. I find it a bit pricey, but there's really nothing else that comes close to this one.
The name of the tool you haven’t found is https://www.keyshapeapp.com/. You will replace svgator in no time
I've recently had the same issue at my job. Tried every tool, including the ones mentioned in this thread. Found them all subpar. Eventually found Keyshape which has been absolutely great. Don't be fooled by the poorly designed marketing site, the tool itself is super robust. (I've found the opposite to be true for SVGator)
+1 for Keyshape. One of my favourite animation tools, along with Hype.app.
Don't be afraid of doing the animation in CSS. That's how I prefer to do simples SVG animations. There are countless tutorials & resources for css animations. Here's maybe a good start: https://css-tricks.com/svg-line-animation-works/
Hej Erik! You can try Spirit https://spiritapp.io/
I personally just use CSS & JS to animate it, because I find it too complicated to learn all the other tools. I am sure they are great, but if I need to animate an SVG twice a year, I'll use the tools that I already know well.
I have used https://animejs.com/ in the past with good luck.
Adobe Animate is also good tool if you have a prior knowledge of flash animation on frames then you can save the animation from adobe animate into SVG animation. it gives you a JASON file like after effects.
Also you can try this online tool to make SVG animation https://shapeshifter.design/
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now