How to: SVG Animations

Small animations are like the delicate spices of a dish - they give a website the finishing touch and invite users to interact. But they often remain an unfulfilled nice-to-have, banished from the project scope. There are many reasons for this: the effort, the required software skills and the performance of the web project. But there is a solution that elegantly avoids all these hurdles: SVG SMIL animations.

The advantages of this method are many: No additional software is required for creation, as Figma and After Effects already offer all the necessary functions. Designers can create and test animations independently without relying on developers. The animations are embedded in the SVG, which means no extra libraries or JavaScripts are needed. Thanks to high browser compatibility and good performance, SVG SMIL animations are an attractive option for every website (Can I use).

To work with SVG SMIL animations, you need Figma and the AEUX plugin to create vector assets, as well as Adobe After Effects and the Bodymovin plugin to create and export the animations. The ZXP Installer makes managing After Effects plugins easier.

As a first step, structured preparation is crucial. All elements to be animated are neatly laid out and given meaningful names. Separately created layers for animations make working easier later. You should make sure that the shapes do not have a border radius, as this property is not transferred to After Effects via AEUX. You should also avoid masks as they cannot be recycled either. Once the assets are properly created, they can be imported into After Effects using the Figma plugin AEUX.

Now it's time to bring the illustrations to life. The individual layers can be animated in Adobe After Effects. While some effects can be seamlessly exported to SMIL, others may require an alternative approach. The effects supported by SMIL include masks (additive and intersect), shapes, solids, texts, precomps, transforms and opacity. A helpful reference can be found here: A Guide to SVG Animations (SMIL).

To export, the Bodymovin plugin is opened in After Effects and activated in the export settings of the plugin SMIL (svg). The export of the composition can then be started. You should test the exported SVG file in the browser to ensure that everything works as expected.

SVG SMIL animations are the ideal solution for efficiently displaying smaller animations such as animated icons. They offer a simple and effective way to improve the user experience without compromising performance. While they are less suitable for complex hero animations, they are an extremely attractive option for many other use cases. The SVG animations shown here were created as part of the implementation of the kids area in the Collection Goetz web app.