Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
UI Animations with Lottie and After Effects

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

Arrow left icon
Product type Paperback
Published in Jun 2022
Publisher Packt
ISBN-13 9781803243801
Length 302 pages
Edition 1st Edition
Languages
Concepts
Arrow right icon
Authors (2):
Arrow left icon
Emilio Rodriguez Martinez Emilio Rodriguez Martinez
Author Profile Icon Emilio Rodriguez Martinez
Emilio Rodriguez Martinez
Mireia Alegre Ruiz Mireia Alegre Ruiz
Author Profile Icon Mireia Alegre Ruiz
Mireia Alegre Ruiz
Arrow right icon
View More author details
Toc

Table of Contents (16) Chapters Close

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

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.

You have been reading a chapter from
UI Animations with Lottie and After Effects
Published in: Jun 2022
Publisher: Packt
ISBN-13: 9781803243801
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime