Book Image

UI Animations with Lottie and After Effects

By : Mireia Alegre Ruiz, Emilio Rodriguez Martinez
Book Image

UI Animations with Lottie and After Effects

By: Mireia Alegre Ruiz, Emilio Rodriguez Martinez

Overview of this book

Lottie is a small and scalable JSON-based animation file. LottieFiles is the platform where Lottie animations can be uploaded, tested, and shared. By combining the LottieFiles plugin and the LottieFiles platform, you’ll be able to create stunning animations that are easy to integrate in any device. You’ll also see how to use the Bodymovin plugin in After Effects to export your animation to a JSON file. The book starts by giving you an overview of Lottie and LottieFiles. As you keep reading, you’ll understand the entire Lottie ecosystem and get hands-on with classic 2D animation principles. You’ll also get a step-by-step guided tour to ideate, sketch for storytelling, design an icon that will fulfill the needs and expectations of users based on UX, and finally animate it in Adobe After Effects. This will help you get familiar with the After Effects environment, work with vector shape layers, create and modify keyframes using layer properties, explore path and mask features, and adjust timing easily to create professional-looking animations. By the end of this animation book, you’ll be able to create and export your own Lottie animations using After Effects and implement them in mobile apps using React Native. You’ll also have an understanding of 2D animation best practices and principles that you can apply in your own projects.
Table of Contents (16 chapters)
1
Part 1 - Building a Foundation With After Effects and LottieFiles
5
Part 2 - Cracking Lottie Animations
9
Part 3 - Adding Your Lottie Animations Into Mobile Apps

How to use this book

In this section, we will guide you through the main aspects of this book and why we thought this would be the best way for you to learn how to create animations with Lottie. We don't want this book to be just another After Effects manual that teaches you how to animate an icon (of course, we will cover that too), but we think it is just as important to have the basics and be able to sketch your own ideas and bring them to life before opening any kind of software. You can jump straight to the chapter that matches your interests best, but we highly recommend going through the book from start to finish.

We want you to be conscious that creating an animation does not simply involve adding some movement to a drawing by using some computer tools. It is the whole process that creates the magic, from ideation, the first sketches, to creating the illusion of movement through different animation techniques such as ease, tempo, and timeline keyframes. At some point, you might have thought why is this book talking about all this old-school stuff such as classic 2D animation?

Well, we could just have covered the process of downloading an animation, importing it into After Effects, and converting it into Lottie so that you could implement it in your app using React Native in a very short period of time... Yes, that would have been the easiest and shortest part (and we will do that too, don't worry).

However, we want to give you some more background, tips, and techniques about animation, so when you finish reading this book, you will be able to think big and create your own unique animations from scratch. Whatever it is you want to animate, we will teach you the basics and give you enough resources and tools so that you can keep on learning in your own time and at your own pace.

That's why we decided to split the book into three main parts:

  • Part 1, Building a Foundation With After Effects and LottieFiles
  • Part 2, Cracking Lottie Animations
  • Part 3, Adding Your Lottie Animations Into Mobile Apps

In the first part of this book, you are going to learn about the basics. As a first approach, we will go through Lottie; you will become familiar with the Lottie and LottieFiles keywords. While you keep reading, we will go into more depth about the entire Lottie ecosystem and will take a quick look at classic animation history.

We will get hands-on with the principles of classic 2D animation to understand the importance of ease and keyframes, two popular techniques that will help us to create the illusion of movement. We will go through the Adobe After Effects environment, getting to know the most relevant features so that, by the end of Part 1, Building a Foundation With After Effects and LottieFiles, we will be all set to start our first animation.

Once we have understood the basics of Lottie, 2D animations, and the Adobe After Effects environment, we will start creating our animated icon. In the second part of this book, we will guide you through a step-by-step tour of a real project to create our first unique animation. We are going to put into practice everything we have learned in the first three chapters. How? Well, we will start with a simple project in which we will be animating our first icon.

By sketching and drawing it, we will create a storyboard that will help us to understand what we want our icon to do. Once that's done, we are going to import this icon into Adobe After Effects and bring it to life by applying some of the 2D animation techniques learned earlier in the book. By the end of Part 2, Cracking Lottie Animations, we will know the best way to export our animations and get them ready to hand off to developers.

So, think about that; whether you are a designer or a developer, once you have finished the first two parts of this book, you will be able to ideate, sketch, illustrate, animate, and export your own unique ideas.

Let's keep moving. So, we will have finished our first animation and exported it. Everything is ready to go. We can't wait to see it implemented in our app or website. So, what next?

Now is where the third part of the book comes into play, and here is why it is so important. Let's imagine that you have spent a couple of days designing and creating your animation (yes, well done; animations are not quick things to do, at least, not the first time). You try to upload it into your app or the website of the app, but something goes wrong? Perhaps it doesn't look how it should or the animation in the app doesn't look the same as the one on the website. Maybe it is too heavy. Is it blurry? Is it responsive?

There are so many things that can ruin your fantastic animation, but let's not panic. Here's where Part 3, Adding Your Lottie Animations Into Mobile Apps, comes in handy. That is where you will learn everything you need to know about how to test and implement your fabulous, stunning, and well-created Lottie animation onto any platform, simply and easily. Thanks to Lottie and React Native, your animation won't look pixelated, be too heavy, or do any other weird stuff.

Once you have mastered the process of creating your own animations and uploading them onto your platforms using React Native, none of these issues will happen again, and your fantastic and unique animation will shine on the screen, just as it was meant to be.

So, now that you understand why this book has been divided into three different parts and why all of them are important, let's move on to discover what Lottie is.