You're reading from UI Animations with Lottie and After Effects Create, render, and ship stunning animations natively on mobile with React Native

Product type Paperback

Published in Jun 2022

Publisher Packt

ISBN-13 9781803243801

Length 302 pages

Edition 1st Edition

Languages

JavaScript

Tools

After Effects

Concepts

Animation

Authors (2):

Emilio Rodriguez Martinez

Mireia Alegre Ruiz

View More author details

Table of Contents (16) Chapters

Preface

1. Part 1 - Building a Foundation With After Effects and LottieFiles

2. Chapter 1: Get Started With Lottie FREE CHAPTER

3. Chapter 2: Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation

4. Chapter 3: Learning the Tools: Getting Familiar With After Effects

5. Part 2 - Cracking Lottie Animations

6. Chapter 4: Move It! Animating Our First Lottie With After Effects

7. Chapter 5: Share It With the World: Working With LottieFiles

8. Chapter 6: Don’t Stop! Exploring Plugins and Resources That Will Keep You Going

9. Part 3 - Adding Your Lottie Animations Into Mobile Apps

10. Chapter 7: An Introduction to lottie-react-native

11. Chapter 8: Installing lottie-react-native

12. Chapter 9: Let’s Do Some Magic: Integrating Your First Lottie Animation

13. Chapter 10: How To Nail It: Controlling Your Animation

14. Chapter 11: Any Questions? lottie-react-native FAQs

15. Other Books You May Enjoy

Tools to create Lottie animations and integrations

In this section, we'll learn about the tools and plugins we need to install before we start creating our own Lottie animations. Don't worry if you haven't heard of them before. In this section, we'll cover all the main ones such as Adobe After Effects, Adobe Animate, and the LottieFiles platform.

If you need more information about how to install these tools, plugins, and extensions, please move on to Chapter 6, Don’t Stop! Exploring Plugins and Resources That Will Keep You Going, for a how-to install guide.

Adobe After Effects

Adobe After Effects is known as the industry-standard motion graphics and visual effects software. It's used to create movie titles, intros, transitions, visual effects for movies and videos, and animations.

So, if we want to create our own animations, we need to install Adobe After Effects. There's no other way, or at least there wasn't until recently (keep reading). Anyhow, bear in mind that this is not a free tool. However, before purchasing it, Adobe gives you the option to install the 7-day free trial version. This can be found at https://www.adobe.com/products/aftereffects.html.

The Bodymovin extension for After Effects

Bodymovin was the first After Effects extension that was initially created to export your Lottie animations. It exports your animation into.json format, which can later be tweaked on the go. You can download your Bodymovin plugin at https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html:

Figure 1.19 – The Bodymovin icon

The LottieFiles extension for After Effects

We've been talking a lot about the Bodymovin extension. But recently, Lottie has also released the LottieFiles plugin for After Effects, which exports your animation as a .Lottie file. The difference between Bodymovin and LottieFiles is the newly added features in the LottieFiles plugin. We will go into more depth on this once we talk about how to export your animations in both the Bodymovin and LottieFiles plugins.

Download the LottieFiles for After Effects extension at https://lottiefiles.com/plugins/after-effects:

Figure 1.20 – The Adobe After Effects icon

The Lottie extension for Adobe Animate

If you are not that familiar with After Effects and would like to try some other tools to create your animations, now you can! It seems that people at Lottie just released an early Beta version of the Lottie plugin for Adobe Animate.

We could say Adobe Animate is the evolution of what once was known as Macromedia Flash, and it is used to bring vector graphics to life.

If you want to try it, you can download the Adobe Animate plugin from https://lottiefiles.com/plugins/animate. However, in this book, we are going to focus on Adobe After Effects:

Figure 1.21 – The Adobe Animate icon

The LottieFiles platform

We can download and install LottieFiles on our mobiles and desktops to preview, test, and share our Lottie animation files. Here are the relevant resources for Mac and Windows:

LottieFiles for Desktop: https://lottiefiles.com/desktop
LottieFiles for Android: https://play.google.com/store/apps/details?id=com.lottiefiles.app&hl=en&gl=US
LottieFiles for iOS: https://apps.apple.com/us/app/lottiefiles/id1231821260

Figure 1.22 – The LottieFiles icon

That's all we need to create our own animations. However, Lottie gives us some more integrations with other tools and software such as Figma or Sketch. You can check them out at https://lottiefiles.com/integrations.