How to create hot animations for any interface
Tags: Motion, Lottie, Animation, Design, Interaction Design

The same principle works for app animations. They have to be small and looped to look good and work well.

Eye-tracking login and icons

Icons — 3–4 seconds of the animation will be more than enough. For most of the tones, you will need to reveal some animation for icons, but sometimes you will want more complex and looped animation.

Technical specifics

Frame rate

We recommend using 30 fps for your animation. Even though the standard frame rate for the web is 60 fps, 30 fps works better — animation looks more smooth and weighs less.

File format

You can use 3 types of files for your websites and apps: gif, mp4, and Lottie JSON.

If you try to compare these formats by their file sizes and quality, it will look something like this. Lottie is the smallest and has the best quality. Mp4 weighs a little bit more and has worse quality. Gif — big file size and bad quality.

Gif

A non-static image format that can be easily used everywhere: on a website, in a mobile app, social media materials, or even sent to your friend as a sticker.

In this format, you will have a transparent background which isn’t possible in mp4 format.

format. This format will be suitable for you with small-sized compositions or single elements.

Better not to use it for big ones because the file size might be too big and its quality not so good comparing to mp4 and Lottie formats.

MP4

It’s the most common video format.

Comparing to gif mp4 has a good quality and a smaller file size. It’s easy to use on your websites and apps.

You can’t have a transparent background in this format so keep that in mind if you want an animation for a website banner or something else with a color background.

Lottie JSON

A Lottie is a JSON-based animation file format that you can use on any platform as easily as static assets. They are small files that work on any device and can scale up or down without pixelation.

Jason is the most flexible format. If you choose Lottie Json, you get the opportunity to change some settings like animation speed, background color, animation on hover, loop animation, etc. via Lottie web player.

To implement a Lottie file on your resource just give it to your developer or use the Lottie file player to generate the code.

Lottie format is suitable for such platforms as Windows, iOS, Android, native script, xamarin, react native, angular, flutter, qt, skia, and vue.js

We recommend using a Lottie format. This way your animation 100% will be of decent quality, you will have a transparent background and implement animations easily on lots of platforms.

If you don’t want to spend a lot of time on the animation, but you want to test Lottie animations — we prepared a lot of FREE animations for you.

4 categories in 2 different styles. You can download full compositions or only elements from them.

Check our website and grab your Lottie right now!

Ideas and design part

When you are thinking about animation ideas keep in mind everything listed above about the duration, loops, and file size.

Here we share our ideas dealing with the creation process and we do hope it will help you.

Think about the main goal of the animation. What story do you need to tell with it? What should the user feel and think while watching? Imagine how the main elements of the illustrations will look. What will represent your story — characters or abstract elements? Brainstorm ideas. Never begin to design or animate if you have only one idea for it. Write down a couple of options, list their pros and cons. Only after that choose the one you will work on. Write down a detailed plan if you have a big story to animate. That will help you plan your work better, so you don’t end up with a long and confusing animation. Work on the style. Collaborate with an illustrator or do it yourself. It’s important to consider the final output format at this stage because if you use some heavy textures or even embedded AE effects, they might not work in Lottie. Do your homework. Name all the layers properly, split all the elements that will be animated to the different layers.

Animation process recommendations

Before you start preparing your illustrations for the animation. You can do this in graph editors where illustrations were created on preparing them in After Effects.

For example, we take this smart guy from our free Lottie animations.

Split body parts into different layers and give them proper names

2. Align anchor points

3. Parent layers

Lottie hacks

We use Lottie in our work all the time so we prepared some hacks for you.