In this article, we will take a first look at Lottie Animation, including what it is and how you can use it for free. Animation is created in software such as Adobe Photoshop, After Effects, Apple Motion and more. Some file formats for animation for the web include gifs, sprites, video, svg and canvas. Lottie Animations are the next generation of animation.

Lottie Animation is a JSON-based animation file format that is better than its predecessors. Why?

As you probably know, file size affects the loading time of a webpage. A larger file with many design elements, such as large images, will take longer to display in a webpage than a small, simple file. So web designers and developers have tried for decades to reduce the size of the files for their projects, by compressing JPGs images or using code-based images such as SVG images. This file size problem is also why some websites omit animations.

Lottie's JSON-based animation file format has a very small foot print, so it displays quickly on the webpage. But it is not just a simple animation. Because you can also add interactivity, your site visitors will be more involved on your website. When you use vector graphics, your animation is scalable without pixilation. But most importantly, it is platform independent and can be used on the web, mobile devices, desktops and even in apps and Telegram stickers.

Now that I've convinced you that a Lottie animation is what you need for your next project, where do you find one. The best place to go first is the LottieFiles website. There you will find a great variety of Lotties animations, free for personal and commercial use. But you will also want to download some free, open-source tools for viewing and creating Lotties of your own.

There are several ways to add Lotties to your webpage but the easiest is to use a plugin or shortcode. For those Wordpress and Elementor lovers, there are several plugins that support Lottie animations.

LottieFiles
https://lottiefiles.com
https://lottiefiles.com/featured
https://lottiefiles.com/editor
https://lottiefiles.com/web-player

Wordpress and Elementor Plugins
Premium Addons for Elementor
Animentor – Lottie & Bodymovin for Elementor
Animated SVG icons and Lottie animations for Elementor
ASVG Lottie Animation Library for Elementor Page Builder
JSON Based Animation for Elementor

Images and screenshots of Lottie and LottieFiles used by permission of Design Barn Inc.