How to Make Simple Animated Onboardings in Lottie Without After Effects

Hi! My name is Mikhail Murzak, I am a product designer at Ozon Seller (seller's website and app).

From time to time we do animated onboarding of large features in a mobile app and for a long time we used Adobe After Effects with the Bodymovin plugin (for exporting to Lottie) for these purposes, but every time it was a torment for me, so I decided to switch to the official Lottie client and wrote this guide for my colleagues.

Now that Adobe is not renewing licenses, this guide has become even more relevant, and I decided to publish it here.

Disclaimer: This guide is for product designers, not motion designers. It is intended to provide a quick guide to creating quick and easy animated onboardings with basic UI transitions in Lottie.

What is Lottie and why?

Lottie — is a JSON-based animation file format that allows you to embed animation on any platform (iOS, Android, web).

Lottie Advantages:

• Small file size (Lottie animations are significantly smaller than other formats such as GIF or MP4 while maintaining the same quality).

• Infinite scaling (Lottie animations are vector-based, meaning they can be scaled up or down without losing quality).

• Cross-platform (you can use Lottie animations on iOS, Android, web and React Native without modifications).

• Interactivity (you can control animation elements so that they are interactive and respond to scrolling, clicking, and hovering).

In the Ozon Seller mobile app, we use the JSON format for both animated and static onboarding. That's why we use the Lottie library tools.

For the same reason, we cannot use animations in the format River (the sources there are files of the format .riveand not .json) — although it is a more efficient (even lighter) and functional (interactivity is configured using nodes) animation format. We will probably switch to it someday.

Why not After Effects?

You may already be happily doing onboarding in After Effects. If you're comfortable with the tool, keep going.

And if you struggle with this cumbersome tool every time, or you haven’t done onboarding in AE yet, I recommend not starting, but immediately using a simple and free alternative — Official Lottie Editor.

The main reason is that After Effects was not created for short interface animations, but for more complex tasks, so for simple animated onboardings its functionality and sluggishness seem excessive.

To compare the two instruments, I made a table:

I will also note that there are other online Lottie editors and even simpler and more pleasant to use (for example, Lottielab), but they have problems with exporting to our applications. We with the developers tested files from several editors, and Lottie Creator will work 100%, besides, it is an official client from Lottie.

We've decided on the tool, now we can move on to the guide itself.

It is better to use the guide in practice right away, so you can add the article to your bookmarks and return to it with a combat mission.

Step 1. Prepare files

First, you need files to export. To understand what files you will need, come up with an animation script.

For example, our task is to make onboarding of a new section that appears in a separate tab of an existing section, as well as new filters. The scenario can be as follows: a screen with an existing section appears → we add a new tab to it → we open new filters → we show how they work.

Ideally, you should make a looped flow so that there are no sharp jumps in the animation when a new cycle starts.

For such a scenario, we will need: a list screen, a new tab, a filter screen, a curtain in filters, as well as elements that will be interacted with (buttons, checkboxes, overlay). In addition to each onboarding, we also need a device mask and a cursor for tap.

It’s even better to mask unnecessary onboarding elements with “skeletons” (simply gray blocks instead of content) so that they don’t interfere with highlighting what’s needed, and the onboarding itself looks neater.

A template with files for onboarding can be viewed at link.

Step 2. Export files

Select all files and export in SVG format, check that all settings are enabled:

To apply auto-animation to an object (I'll talk about it below), export each element on the screen that will be interacted with (button, tab, snack, curtain) as a separate SVG file.

But if, on the contrary, you need to export the entire screen (and then add interactive elements on top of it), first group all the elements on it so that there are no errors in the order of layers during import.

Step 3: Open Lottie Creator and Transfer Files

You can do it through the interface, or you can simply drag and drop it.

Sometimes there are problems with transferring raster images to Lottie Creator (for example, a product photo in a card) – try importing the image separately or replacing the raster photo with an icon.

To make it easier to work with files, it is better to name them immediately upon export so that they can be distinguished in the list of files, otherwise it will be like this:

Step 4: Set the Scene

You need to set the dimensions of the scene and set the animation time – you can start with a 10 second reserve, and then shorten it if it turns out shorter.

Next, we put the device mask as the first layer; you can block it right away.

Additionally, you can divide screens into separate scenes – this is convenient when different animations occur on different screens – it allows you not to get confused in the list of files.

Step 5. Make an animated onboarding

The whole animation process would be long and unclear to tell and show, so I will write about several basic techniques. Lottie Creator, among other things, is good because it has ready-made animations built into it that can be applied to objects. Therefore, it is enough to select the screen, apply the animation and edit the points on the timeline.

1. Move the cursor and tap on it

Select the cursor → Select the appearance animation → Move the cursor where we need it (for the duration of the animation) → Add the default size value to the timeline (by clicking on the diamond – so that the size changes only from this second) → Select the animation Pop out → Done, now you can move to another screen.

2. Switch to another screen

Add a filter screen → Drag it to the right side of the stage area → Select the appearance animation → Move the screen to the stage (for the duration of the animation) → Move the points on the timeline to get to the cursor click.

3. Retractable curtain

Add a curtain and overlay to the scene → Drag the curtain under the scene → For the overlay, create an animation with the parameter Opacity and we put 0% → For the curtain, select the appearance animation → Move the curtain where we need it → In the middle of the curtain animation, add a point on the timeline for the overlay animation and set it to Opacity 100% → Profit.

This functionality has a limitation – auto-animation is applied only to the entire file, that is, if you exported the entire screen to SVG, you can only apply animation to the entire screen, and not to a button inside, for example. Therefore, to apply auto-animation, export elements separately.

If auto animation doesn't suit you, you can do the same manually. Using the cursor as an example:

Adding points on the timeline to animate the cursor with type Position And Scale → Remove the cursor from the screen → Move the timeline as much as we need (1s) → Add a point on the timeline for Position → Move the cursor where we need it → Add a point for Scale (so that the reduction starts from this second, and not earlier) → Move the timeline to 5-10f → Change Scale cursor on 40x40px → Move the timeline to 5-10f → Returning Scale cursor on 48x48px → Done.

Step 6. Export to Lottie

Click on the Export button, a new page for saving will open, save the animation to your Workspace in Lottie Files.

Step 7. Export to JSON

Lottie Files already allows you to export your animation to JSON, GIF, MP4, etc. To add animation to your app, all you need is a JSON file.

Ready!

Useful links

Thank you for reading to the end! If you have any questions or want to correct me, feel free to write in the comments or personally: t.me/mikemurzak

You can also see my saved notes and design-related posts in the telegram channel: t.me/design10000

Subscribe to the telegram channel Ozon Design — is a collective account of leading Ozon designers, where we share experiences, thoughts and cool selections about design and productivity.