Animatly.io the platform for animated Icons and Illustrations

Animatly.io — Mon, 17 May 2021 13:00:04 +0000

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.
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.

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.

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.

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.

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/

How Lottie animations can improve your design

Animatly.io — Thu, 29 Apr 2021 14:40:01 +0000

Congrats, you just found the article on the newest trend in design. For all UI/UX designers and front-end developers, this is a must-read!
What is a Lottie animation? A Lottie is an animation based on vectors. It's pretty similar to an SVG. It comes with the same advantages such as memory size and interactivity. I think you can already guess what possibilities you can get with a Lottie. If not, I’m telling you shortly. You can use animations on your page everywhere and however, you want to. You have the option to change the color, movement, play direction, behavior, absolutely everything.Maybe now you wonder why you haven't heard anything of it so far. Lottie is quite a new way to create web animations. It was developed by Airbnb a few years ago. Today many big brands are working with Lottie animations, as one example is Uber, Netflix, or Microsoft. A big advantage is the simplicity to create an animation. You can basically export your animation from After Effects with the Lottie or Bodymovin Plugin. The plugins are free to download. You only need to take care, that some effects are not supported by Lottie. Also, some expressions are difficult to handle.
As I said the possibilities of Lotties are endless. Uber Eats as an example uses it after you ordered food over the page. You will get an illustration loop.

One way to improve your design is to place your animation as prominent as Uber Eats does. For example, you can download and customize hundreds of same-looking Lottie animations from https://animatly.io. The other option is to use less prominent for example as an icon in your design. You have the option to play the animation only by hover, or as an endless loop. When you choose the endless loop you should take care the animation plays at a slow speed. otherwise you the user experience will be distracted. When I tell people to use animated icons they often look weird at me until they see how the animations really enhance their design.

The coolest thing is, that you can use Lotties with almost every web builder nowadays. It works with WIX, Webflow, Storyblok, WordPress, and many more. Of course, you can also use it in your apps. A good start to use animated icons would be in your feature section, which a lot of web pages have.

Just replace the static images with Lotties and watch how people will start to love your page. https://animatly.io is also a good place to go for animated icons. To integrate a Lottie on your page you can eighter integrate it manually which is more difficult for non-coders. Or you can upload it to lottiefiles.com/preview and paste a shortcode from the web player (lottiefiles.com/web-player)on your page. There you can also set different things on how it should handle your animation.
The problem is when you're designing screens you can not drag Lotties to Sketch or Figma. You must first convert the animation to a GIF or use the static version in your prototype. On Animatly you have the possibility to download the SVG which makes our lives much easier. Anyhow the big brands are developing solutions to handle Lotties better and better. Also, Lottie is getting bigger and people worldwide improving the Framework daily. Now it's time to act and start working with animations.

Forem: Animatly.io

Animatly.io the platform for animated Icons and Illustrations

How Lottie animations can improve your design