UI Animation Resources

UI Animations

UI Animations enable you to make your design more interactive as well as impressive. Compared to static designs, animated designs are more capable of grabbing a user's attention. There are a lot of tools which allow you to create your animations. There are a lot that have pre-existing animations as well that you can simply download and use. Dribbble has a lot of great examples.

After Effects

After Effects is the perfect tool to start creating animations. With the help of the bodymovin plugin, you can export your animations to JSON format and then, use the Lottie Library to add your animation to the website or your app.

Shape.so

Shape is a great source of Lottie animated icons and illustrations. You can easily take any of the assets and use it in your website or app.

Keyshape

Keyshape is another way to create animations. You can import your assets from Sketch, Illustrator or Affinity Designer and can even use it to open certain Lottie animations.

LottieFiles

LottieFiles is the most extensive library of Lottie animations. There are also multiple tools and plugins available that help you use Lottie animations with a variety of frameworks.

LottieFiles WebPlayer

WebPlayer by LottieFiles is the best way to implement your lottie animations in Wordpress, Shopify, Webflow, Squarespace or any website.

Further Reading

There are exciting posts about animations across the web. Pasquale D’Silva talks about the importance of animation in design. Mustafa Kurtuldu talks about how you can use animations to make people feel that your site is faster. If you'd like to improve your motion graphics skills, Mathias Mohl has an excellent book that can help you.

Add Lottie animations to Figma

For this exercise, we will work with Figma and with the Lottie plugin for it. As you will notice we have some empty space in our frame, this is where we will add a GIF animation.

Head over to the exercise file. Here, drag and drop the GIF animation in the small square on Fill.

You will notice that the GIF animation fills the rectangle. Personally, I think this is a neat feature in Figma.

If you would like to choose a specific frame to preview in your design, click on the thumbnail and a window with a small timeline will open.

Now, let's click on the play icon in the tab bar to enter presentation mode. Here, you will be able to preview the GIF animation in your UI.

Conclusion

Animations are a big part of any UI and these can give a pleasant experience to your users. Make sure to select one that aligns well with your interface. You can even create your own animations using the tools mentioned above.