An easy way to create beautiful vector animations for web

SVG animations are a great way to make your UI move. This file type can achieve the same results as a GIF or MP4 file, but there are two distinct advantages;

• They’re vector-based, so they’ll look great at all resolutions
• Their file size is significantly smaller than the competition, improve load times for your users.

Here’s the quickest explainer for how to create sharp animations using Adobe Illustrator and After Effects…

Start by prepping your artwork using vectors in Adobe Illustrator.

Separate each piece of artwork into layers, grouping those you’d like to move together in the animation.

Once your artwork is ready, import it into After Effects. Make sure you select import as ‘Composition — Retain layer sizes’. This means your artwork will import based on the Layer groups you set up in Illustrator

Even though you’ve imported from Illustrator After Effects won’t recognise your vectors. To vectorize your artwork select Layer>Create>Create Shapes from Vector Layer.

Animate your content. Any animations should work fine, but keep in mind some expressions or text animations might have unexpected results.

Once your animation is ready, you can use the Bodymovin plugin to export it to an SVG file.

With Bodymovin installed, add it to the render queue.

Your exported animation can be viewed at LottieFiles.com or you can view them using the Lottie plugin for After Effects.

You can use your exported file in your UI design to bring your screens to life or to make things clearer for your users.