Lottie: Motion made easy for the UX UI designer
At Lateral View, we tried out Lottie files on our own projects.
When working with animations, sometimes we designers face up some issues. We can’t see the result of our work until the developer implements it. At this moment we realize if the animation gets “broken”. Or maybe the forms that interact in our animation don’t look as they are designed.
Lottie, an Airbnb product allows us to preview After Effects’s animation when we export it with Bodymovin to json files, and apply them in different digital platforms with the same ease with which static images are used.
All animations contemplate a previous work. Starting with writing a script to the first sketches of the “story board”, and visuals aesthetics and design decisions in general. But sometimes all these plans get frustrated when the .json files don’t interpret what we imagined.
At Lateral View, we are testing Lottie and we want to give you some tips of our learning to take them into account in your work process.
- Don’t use JPG, TIFF, PNG images, as they have errors when we want to preview them. As a result, we’ve got single standard images (blue block with a blank question sign) that eventually respond to the real animations.
- All imported files, such as Illustrator files, and those that intervene in the animation must be converted to vector layers so that they aren’t interpreted as images. If you can create the figures using After Effects’ own tools, the risk of error is lower.
- Both the imported and created figures with AF tools, must be completely closed, or namely, all their nodes must be connected since in the previewed the export, they generate ruptures and they don’t respect the original forms.
- The extension doesn’t support the use of degraded, in most cases it doesn’t export or it gets replaced by a black to white gradient.
- Not all modes will export. If for example you import Illustrator files with a tracking matte applied, when converting it into vector layer this new layer doesn’t preserve the actions of the keyframes.
However, the tracking mattes or modes offered by the program applied directly to the vector figures, don’t generate ruptures when previewing. Except for the dissolve or design alpha mode, for example. It will not break your exported file, but it won’t preview or apply to the final animation. - Although several compositions can be worked within the same project, eventually only one of them is exported, which can also lead to confusion. This is why we recommend to be extremely neat and orderly during the work process within your Affter Effects files.
How to preview a project in Lottie?
Once the animation work in After Effects is complete, we must verify that the file works and that it has not suffered any rupture.
To carry out a preview of the projects in After Effects, we must follow same steps:
- Window> Extensions> Bodymovin
Automatically the window to render will appear, where we will select the composition that we want to render and we will assign a location, then press the ‘Render’ button.
A .json file will be generated in the location indicated in the Bodymovin folder. We can drag the file to the browser and dump it into LottieFiles and preview it easily and correct any errors that may arise. (To preview in a mobile phone you must use Lottiepreview). You can find it for iOS and Android.
Previously we also analyzed and shared the contribution of the animations to the user experience in our apps: https://medium.com/lateral-view/why-is-motion-design-so-important-to-user-experience-50110ba4b5e1
We will update this post with the new insights that we are discovering. Have you, too, experimented with Lottie like us? What do you think about it?
If you want to know more about technology and innovation, check us out at Lateral View or subscribe to our newsletter!
