Svg animations
Can someone explain what’s the best way to make animations using svg’s I genuinely can’t understand it and none of the videos I watch really help me , how do I get assets how does it work Etcetc
2 Replies
Sara Soueidan
CSS-Tricks
A Guide to SVG Animations (SMIL) | CSS-Tricks
Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.
In Figma, right click on the whole group/frame and copy as SVG
If you download vector assets from stock sites like Freepik, Envato, Shutterstock, Adobe Stock, etc, usually they come in .eps or .ai format. Rarely it's an .svg. You need to open them in a vector editing app like Inkscape (free), Adobe Illustrator (subscription), Affinity Designer (paid), to name a few. They have an option to export as SVG
If you want to visually animate them like in a WYSIWYG editor, you can check out Lottiefiles for Adobe AfterEffects (need Adobe sub) or SVGator (freemium). There are a few other apps that can do that but I haven't researched about them