Rest assured, it sure isn't. Developers simply embed the exported JSON files as a JSON resource in their project and use Lottie to load and play the animations wherever they see it. There are native animation view components for both iOS and Android platforms. Wherever you can use, insert or append a view in your application, you can display a Lottie animation. That means you can use animations as part of an on-boarding image, a view background but also on a button, in table cells, etc. On iOS it's also possible to perform native view controller transitions via Lottie.
That’s already pretty impressive, right? But things get even better. Because Lottie animations are rendered in realtime, you’re not limited to just playing the animations as they are, you can also exercise tons of control over them. This includes (but is not limited to) realtime interaction with the playback speed, start/stop position, reverse playback and scrubbing. It's also possible to change animations at runtime via the Dynamic Properties API. This requires the designer to set up the right layers and properties in Adobe After Effects. These layer properties can then be accessed and edited via key paths. Examples of such editable animation properties are the layer's X, Y positions, scale, opacity, colour and much more. Note that before you start, it may be a good idea to check the supported After Effects features on airbnb.io/lottie/supported-features.html.
The Dynamic Properties API is really interesting, because not only do you get to watch the animation, you (as the developer) and your users get to interact with it as you see it. A few examples of interactive animations are:
- Animated button states
Imagine having an “add to basket” button. This button displays a “+” icon by default. When the user taps the button, the “+” icon animates into a spinner indicating the item being added to the basket. When the "add to basket" web service request has completed the spinner morphs into a checkbox, assuring the user that his item was successfully added. This can all be done with a single animation by making good use of keyframes and scrubbing.
- Parallax backgrounds
For example, an animation can span multiple onboarding screens, whereby the animation progresses back and forth as the user swipes through the topics presented.
And your designers? All they need to do is install the free BodyMovin plugin in Adobe After Effects, export their work to the required JSON files and throw them over to the developers. Well, that, and create those gorgeous animations of course.
Lottie certainly made our lives easier. If you’re interested, check out the Community showcase on Community Showcase · Lottie to get an idea of the animations you can incorporate into your own apps.
Get more tech news and updates from The Reference delivered to your inbox by signing up for our monthly newsletter.