Looking For Fashion?




Top Principles How to Design Lottie Animations for your Website or App


What is Lottie animation?

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. And the best part — Lottie animations don’t require any coding knowledge!

How Lottie animation can simplify your life?

You can use Lotties on basically any platform: web or mobile. This means you can integrate them seamlessly into both apps and web pages.

Lottie animations can even be used as stickers on messaging platforms. Compared to GIF and PNG format JSON files are small, so a Lottie file significantly increases download speed and reduces the amount of disk space utilized.

In Lottie, you can mix vector and raster elements and apply transformations at run-time. For better understanding, we will show how we animated and used Lottie animations in ITG.digital.

All fun animations on our landing page are Lottie files (even interactive dog changes from the banner).

How to do Lottie animations

Step 1 — Design
First things first, you need to finalize your design and prepare it for the animation. Originally we had an illustration of the girl with the dog that you see on the left. We planned that our girl would sigh heavily while tapping her foot, so we needed to change the pose. After changing the pose, we draw some options of the texture for the girl’s dress and finally decided which to animate.

You should know some things if you decide to animate with textures:

  • It’s better to use vector textures — this way your final file will be smaller.
  • When you are drawing the texture, keep it in mind that the fewer points and parts your texture has, the easier it will be to animate it. Also, by keeping your texture simple, you’re reducing the size of the final animation file.
  • If that’s possible, don’t use masks in the animation, otherwise, bugs may appear in some browsers.

Step 2 — Animate

The next step is the animation. To get a Lottie file you need to animate some illustrations and then convert them to JSON.

The best advice you can get for that step — keep it simple. Don’t use effects and animate the main properties of the layers: position, rotation, scale, opacity. Path animation will also work perfectly.

Animation process
Dos and don’ts
There’s a long list of After Effects features that Lottie either supports or doesn’t support. You can find it here. But honestly, there are only a couple of things you really should know before you start animating.
You can use:
- animated shapes of any kinds
- colors, opacity, gradients
- png/jpeg elements
- trim path
- repeater
You can’t or better not use:
- masks
- any sorts of effects except fill
- merge path

Finally, we got this cute and a little bit nervous girl.

Later, when you are implementing animations, your animations can be looped or only played once.

So keep in mind that if you want a perfect loop on the website/app, make sure your animation has a perfect loop before exporting from After Effects.

Step 3 —Export Animations

When you’ve finished the animation, it’s time to export animations.
To do that you have 2 ways: Bodymovin plugin and Lottie files plugin.

Bodymovin plugin
1. Open bodymovin and find the composition you need to render.
2. Adjust settings. Check “Glyphs” if you have some text in your animation, “Include assets in JSON” if you’re using png/jpeg images in the animation.
3. Click render and that’s it!
4. Preview your animation in bodymovin or on the Lottie files website.
5. If you want to show your animation to someone who isn’t familiar with Lottie, just click “demo” in the render. This way you will not only have JSON file, but also HTML that anyone can preview on the browser page.

An export process with bodymovin plugin

Lottie files plugin
With Lottie files, you can do the same thing, but this plugin has more features that bodymovin + you don’t need to upload files on the Lottie website in the browser. With this plugin, you can preview animations in After Effects as they will be in Lottie.

Steps for rendering with Lottie plugin are pretty much the same, but they have some extra features:

  • a full and good working preview, exactly like on the Lottie website
  • uploading animations straight to the Lottie website
  • a library with free Lottie animations (you can choose the animation you like and download aep file straight from the plugin)

Also, it must be mentioned than Lottie files plugin is much smarter than bodymovin. You don’t need to worry about any render settings, such as png/jpeg elements render or expressions optimization. Somehow plugin figures out the best way to render them itself.

Lastly, this plugin has not only pros but one big con — quite a slow render comparatively to bodymovin plugin.

An export process with Lottie files plugin

Now, your animations are ready to use whenever you need them. You can use Lottie files on iOS, Android, web, and React Native without modification.

How we use Lottie animations at Netrix

Interactive dog change
This kind of animation is quite complex. We needed to animate two different positions of the blue dog and to make the change of the dogs interactive.
To achieve this, we animated 6 transitions from one dog to another and collected those animations in one composition.
While implementing our developers were working with the timecode of our JSON files, so they didn’t need to animate anything, which saved a lot of time.

So, whichever dog you choose, the animation will be smooth and fun.

Dog running line — another funny and easy animation on our website. We only needed two things: a running dog and to animate the position property.

Animated tabs illustrations

Looks cool, right? You may think it was hard to animate and implement, but it didn’t take much time at all. We designed and slightly animated illustrations for each tab. Then we put them into one composition and exported it to JSON. As with the dog changing animations, devs worked with the time code, which allowed us to bring our website to life in no time.

Fun pricing animations

Those cute dinos also were animated in After effects and were implemented to our website using Lottie. Small details always make a difference, so don’t be afraid to use Lottie and bring even the smallest parts of your design to life.

Conclusions

To sum up, we can say that Lottie saved us many times when we were working on ITG.digital — we implemented our ideas 3 times faster compared to using javascript animations.

And the most important — we got final animations exactly how we imagined them. Animation in After Effects is much easier and more flexible in instruments than javascript animations. That allowed us to be more creative in the design process. Also, we saved a lot of time fixing and correcting design. Whenever we had to change something, it required just two steps to be made: edits in After Effects, replacing the old JSON file with the new one by our dev and we were ready to go.

Remember that Lottie Files are compatible with Wordpress, Shopify, Webflow, Squarespace, Wix, Readymag or any other Website, as well as iOS and Android apps!

You don’t need to write a code to adjust the display options of your animations. For that, you have a Lottie web player which will do that for you.

Now you know everything about Lottie and we bet you are ready to create your cool animations for web and apps!

Before you start, you can play around with our waving girl animation that you saw earlier. You can download JSON and AEP files here, HTML here.

Prepared by Vera Sprenne and Netrix team ️


Top Principles How to Design Lottie Animations for your Website or App was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.