Originally posted over 3 years ago by Erik Fanki, UI/UX Designer at Äventyret
Animating SVGs can be a game-changer for creating smooth, scalable web animations. However, many designers find that using Lottie with After Effects—although powerful—can be a messy and heavyweight process when all you need is a lightweight solution that works directly from your Sketch vector layers. Erik Fanki asked the community: What tools do you recommend for generating animated SVGs while still being able to work with keyframes?
Top Tool Recommendations
Animator (formerly Haiku)
Overview:
Animator has emerged as a popular choice for web animations. Designed with web production in mind, it integrates well with design files and streamlines the process from Sketch to production-ready animations.
Community Feedback:
- Ryan Cupper praised Animator for its robust capabilities and active support on Slack.
- Andrew Richardson highlighted its ease of use, noting that it makes reworking small elements incredibly simple.
SVGator
Overview:
SVGator is another tool designed specifically for animating SVGs. It offers a user-friendly interface where you can set keyframes and control various animation parameters.
Community Feedback:
- Nemanja Nenadic described SVGator as the best tool he’s used for SVG animation, even though he admitted it’s not perfect.
- Tyson Kingsbury echoed this sentiment, mentioning that despite a higher price tag, it remains a strong contender in the field.
Keyshape
Overview:
For some designers, Keyshape stands out as a superior alternative. It provides robust animation capabilities tailored to SVGs, and several users have found it to be more reliable than SVGator.
Community Feedback:
- Amos Gyamfi and Pol Kuijken both recommended Keyshape, with the latter noting that despite a lackluster marketing site, the tool itself is highly robust.
- Taras Brizitsky added Keyshape to his list of favorite animation tools, alongside other notable options like Hype.app.
Alternative Approaches
CSS & JavaScript Animations
If your animation needs are relatively simple, don’t overlook the power of native CSS or JavaScript:
- M WM W and Thomas Michael Semmler both mentioned that many designers opt to animate SVGs directly with CSS and JS. There are plenty of tutorials available—for instance, CSS-Tricks on SVG line animation provides a great starting point.
- This approach can be especially attractive if you already have experience with CSS animations and want to avoid adding extra software into your workflow.
Other Noteworthy Tools
- Spirit: Alexander Radsby suggested trying Spirit, another tool that caters to SVG animation.
- Anime.js: Alex Carpenter mentioned his positive experience with Anime.js, a lightweight JavaScript animation library that works well with SVG elements.
- Adobe Animate & Shapeshifter: Imran Khatri pointed out that if you have experience with Flash-style keyframe animations, Adobe Animate can export SVG animations (and even produce JSON files similar to After Effects). Additionally, online tools like Shapeshifter can help create SVG animations without the overhead of desktop software.
Choosing the Right Tool for Your Workflow
When deciding which tool to use, consider:
- Complexity vs. Simplicity: If your animations are complex and require detailed keyframe control, Animator, SVGator, or Keyshape might be the best fit.
- Budget: Some specialized tools may be a bit pricey. Weigh the cost against the benefits they bring to your workflow.
- Familiarity: If you’re already comfortable with CSS and JS, a native approach might be both lightweight and efficient.
- Integration: Look for tools that integrate seamlessly with your existing design software (like Sketch) to minimize workflow interruptions.
Conclusion
There isn’t a one-size-fits-all solution for animating SVGs. Whether you choose Animator for its production-ready workflow, SVGator or Keyshape for dedicated SVG animation tools, or even stick to CSS/JS for simpler needs, the right tool will depend on your specific project requirements and workflow preferences. Experimenting with these options can help you discover the best balance between ease of use, control, and performance for your SVG animations.