Animatly.io the platform for animated Icons and Illustrations
Tags: webdev, ux, javascript, libraries
Published: 2021-05-17 13:00:04

Animatly is a platform for designers and developers where you can download and customize animated icons and illustrations. If you now wonder why to use animated icons and illustrations, I suggest you to read this article: https://dev.to/animatlio/how-lottie-animations-can-improve-your-design-5cga

Animatly is based on Lottie animations. Animatly stands for the easy way to customize and download animations in the fastest way possible. Compared to other platforms, you can change the color of the whole icon library with only one click. ![Animatly Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8tlugs8nrdm9sw9cg08.png)
According to the color, you can also change the stroke size of each icon. To make this possible you need to add some parameters already in After Effects. That's why it only works for Animatly icons. For the best workflow, you download the SVG, for your design program and at the same time download the JSON file to hand it to your developer. Make sure you hand him the JSON and not the HTML file. The HTML is only for previewing the animation. You also have the option to convert the Lottie to a GIF but it will take quite some time. When you click on Edit you will get more options to perfect the animation for your needs. 
![Animatly Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx6fjjqxxbzpu17jamra.png)
To save an animation you can hit the like button and it will be stored in your account. 

Animatly is specialized in perfectly looped animations. Compared to other platforms Animatly is mainly made for animations that should fit your normal screen behavior. That means that you can use them instead of your normal static icons and illustrations. The animation style is very slow and made to not interrupt the user in his experience. They are just perfect for feature sections.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmr2quzwvq2r54a1dsu1.png)
Many big Agencys have gone from static icons to animated ones in the past few years. It became more than just a trend. Even Stripe (one of the biggest payment providers in the world) is using animated icons naturally in their screen design. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4ivo9nrpc193mkvoxvq.png)
If you still think animated icons are not necessary, then any help comes too late. 

No wait.. maybe there is something else I can impress you with. We haven't talked about animated illustrations yet. Animated illustrations are even rarer than animated icons. Animatly belongs to the biggest consistent libraries in the world for animated illustrations. They are even more satisfying than animated icons. Animatly has an illustration for every situation. And if there are missing some they will be created very soon. The Editor of the illustrations is even more iconic.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j5fzivvv6v7p750pgyk.png)
You can change every color of the animation in a very easy way. If you hover over a color field the color on the illustration will start to blink in black and white. You are able to match the colors of the animation to your CI/CD within a few seconds. You will get all of that for an insane price of just 15$. With buying a license you definitely can't go wrong. https://animatly.io/