Lightweight and responsive web animations using SVG-Animate
Morphing is an effect that changes one image into another through a seamless transition. You can experience it in After Effects whenever you’re working with Paths or in Pure CSS animation. Here, you type in the axis values for each frame to create the illusion of motion. In the case of Paths, you need the help of Lottie Libraries to export your animation to SVG in order to add it to your website as a light image. With Pure CSS you have no visual to work with, and you may not even have the necessary coding skills to get started. There is also a third way. A designer-friendly tool called SVGator lets you import your SVG and create an animation for use online.
Which method did we choose?
Here’s how we used it at Brainly. We have over 200 million users monthly, so we have to keep our site as light as possible. For our animation, a Lottie takes up 237kB plus design with animation code, making it too heavy for our policy of hardware inclusivity. The second option was to give two frames of animation to the developer to combine them. But with all the animated characters involved, we were sure the designer would have a lot of adjustments afterward connected with shapes, timing, and easings. So, like Goldilocks, we found the third option to be just right. Right? Wrong.
SVGator allows you to upload SVG frames to create an animation out of them, but as an in-browser tool, it doesn’t let you save your work along the way. Its CSS-only mode is very limited and trying to use Bezier handles turned out way worse than in regular vector software. What we were missing in all three options was a combination of: the designer’s control of the animation while combining the images, comfort in using software to modify frames, and a lightweight output. In conclusion, none of the tools available fit our goal.
SVG-Animate
Fortunately, Bartosz Lorek — Software Engineer at Brainly, came up with the idea of creating a tool that allows the designer to preview auto-animation of two or more static images. SVG-Animate works very simply: You have a folder where you save your static SVG files from which the tool creates your animation. You also have a config file where you add data like time, easings, and delay to control the animation. Importantly, you can overwrite the file and check the changes in a live preview mode in your browser. All you need, apart from a tool for creating SVG images, is software like Visual Studio Code to combine said files. Of course, there are some limitations. All shapes have to be named properly to morph, and not all of the transformations are allowed.
What are the potentials of SVG-Animate?
- Moving paths, polygons, polylines and lines
- Controlling the time of element animation
- Adding delay to element animation
- Adding one of 29 different easings to animation
SVG-Animate requires less than basic knowledge of CSS. Your own smarts along with directions from this article should be plenty to get you started.
New Brainly Homepage Animation
Let me take you through the process behind it.
Designer:
- prepares SVG frames in Adobe Illustrator
- uses SVG-Animate to preview the animation
- uses SVG-Animate to set timing and easings
- delivers fully working animated SVG file
Developer:
- implements SVG on website
How to use SVG-Animate?
Source: https://github.com/brainly/svg-animate
Code editor: https://code.visualstudio.com/
Vector software: https://www.adobe.com/pl/products/illustrator.html
There will be a folder named Frames — the most important for you as a designer. This is where you put your SVG frames and where you’ll find the config file that allows you to manipulate each shape in your animation.
After I received access to the tool, I prepared my image for animation by:
- Organizing layers by grouping and renaming them properly to simplify the arrangement,
- Adding the word animate to the layers I wanted to morph,
If your file is cleaned up and named properly, you can start working on the next frames. Keep in mind restrictions that are listed on the Github page for the tool. For example, the number of anchor points for the animated element has to be the same in each frame.
Your best friends here are the Pen Tool and the Direct Selection Tool (working in Illustrator). Using these tools you can move anchor points and manipulate bezier handles.
If you have your SVGs already in the frames folder, you can preview your animation in-browser. Even better, whenever you override changes in a file it automatically updates in your browser, giving you a virtually live view of what you are working on.
How cool is that?
If you want detailed tutorial on how to use SVG-Animate, check out follow up article I’ve written about it.
Thank you for reading, and feel free to try out this new tool and tell us what you think of it.
Kudos to our innovative engineer Bartosz Lorek and best-in-class editor Shyama Johnson.
