In the previous article, I talked about ways to create animated SVGs without using third-party libraries. This approach works well for simple animations and when the amount of work is insignificant. But what if you need to animate a lot of SVGs?
In this case, it is much easier to use specialized software. In my opinion, one of the best candidates is Friction. It is amazing motion graphics application that can create an animated SVG file using the SMIL format.
Let's take a look at this tool in action.
Export restrictions
Before creating an animation, let's check the documentation for any limitations. It would be frustrating to create a masterpiece and then not be able to save it in the required format. So we have two options - save animated SVG or video.
When exporting to SVG, Friction can correctly save the following types of animations:
- Transforms (translation, rotation, scale, shear, pivot and opacity),
- Gradients,
- Images,
- Texts,
- Keyframes,
- Graph,
- Expressions,
- Transform effects (follow path),
- Path effects (trim path and more),
- Raster assets (images/videos),
- Blur effect,
- Shadow effect,
- Shape morphing,
- Masking (Blend Mode DstIn and DstOut),
- Mix Blend Modes (it is needed to enable it at export dialog).
In my opinion, this is more than enough to create SVG animation. If you don't know where to start, I recommend reading the section on animation techniques - this will help you evaluate the program's capabilities.
But don't rush to create figures directly in Friction - the developers themselves emphasize in the Usage section that this is a tool for animation, not for creating vector images. Personally, I'm used to using Inkscape, so I first prepare the figure there and then import it into the Friction project. To fully appreciate the benefits of using this software, I will be using the character from the previous article - Mr. Pearman is already here
Workflow
In fact, everything is very simple - you need to create a new project and import the prepared SVG into it. When creating a project, you need to specify the animation duration, frame rate, size, and background. And then the classic creation of animation based on keyframes. In my case, it looked something like this
Things to keep in mind:
- you can duplicate keyframes so as not to create them again,
- you can customize Bezier curves to adjust the smoothness of the animation,
- you can move object pivot to set up transformations.
You can open the relevant section of the documentation for a wealth of useful tips. These tips will help you animate faster and more easily. As a result, I obtained the following animated SVG file:
For comparison, the Static section contains the original SVG, and the Dynamic section contains the one animated using JS and CSS. Please note that in the Friction section SVG is added to the layout via a simple <img/> tag, it is not interactive and does not contain CSS or JS scripts. To make this SVG file interactive, you need to explicitly place it in the markup and use, for example, pauseAnimations() and unpauseAnimations() methods. These methods control all child animations of the SVG. Technically, there is a way to access individual animations through SVGAnimationElement methods, but I don't think this is entirely correct if we're considering an SVG image as a complete and independent element. In any case, this would require additional JS and some extra work outside of Friction.
Conclusion
I think Friction is a very useful and necessary software, there are at least 5 reasons for this:
- it is open source (so that your wallet doesn't suffer),
- it is suitable for different operating systems (you can simply download and install),
- it has well-developed documentation (I found answers to all my questions),
- it supports many export formats (instead of SVG, you can use for example MP4 or WebM),
- it supports scripting through ECMAScript (for true followers of JS).
And the most important thing is that by mastering simple SVG animation, you can go further in the motion graphics and expand professional skills.
Enjoy your Frontend Development!