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

What this book covers

Chapter 1, Get Started With Lottie, explores the world of Lottie and LottieFiles and why it is so valuable for both designers and developers. Learn what Lottie is, who created it, and how LottieFiles works. You will also discover the tools you need to make Lottie animations.

Chapter 2, Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation, begins with a brief overview of animation's history before focusing on the 12 principles of classic 2D animation that will help us create more realistic animations. As you become more familiar with Storytelling, Ease, and Timing, you will feel more confident about the animation ecosystem.

Chapter 3, Learning the Tools: Getting Familiar With After Effects, teaches you the basics of animation with After Effects. Terms such as composition, timeline, and keyframes will start to sound familiar and will give you the foundation to get started.

Chapter 4, Move It! Animating Our First Lottie With After Effects, is an easy to follow, step-by-step guide for creating your very first animation. By using a real-world example, you will learn to set up a composition, import files, animate, tweak and learn basic tricks and animation techniques for special effects.

Chapter 5, Share It With the World: Working With LottieFiles, is a walkthrough on how to export animations to JSON Lottie files for developers to work with. It also describes how to use the LottieFiles platform in its entirety and have some fun creating animated stickers and icon sets for Telegram.

Chapter 6, Don't Stop! Exploring Plugins and Resources That Will Keep You Going, is the chapter to find all the resources that will keep you moving forward. A detailed table of Adobe After Effects best practices and dos and don'ts for exporting animations without trouble is included. This chapter will also provide step-by-step instructions for installing all the plugins and tools for creating animations.

Chapter 7, An Introduction to lottie-react-native, provides a brief explanation of what lottie-react-native is, which platforms are supported and how to navigate through the different parts of the project such as the code repository, the npm repository and its documentation.

Chapter 8, Installing lottie-react-native, provides the first step to get our animation up and running in our mobile app. We will go through the required steps to have lottie-react-native properly installed in both iOS and Android apps. It covers common pitfalls, platform and alternatives, and everything needed to get our apps ready for our first Lottie Animation to be rendered.

Chapter 9, Let's Do Some Magic: Integrating Your First Lottie Animation, explains how to integrate a Lottie file in our app and render them through lottie-react-native. By the end of this chapter, we will have a functional animation running in both iOS and Android apps.

Chapter 10, How To Nail It: Controlling Your Animation, teaches you how to play Lottie animations forward, backward, pause it, accelerate it or decelerate it. In this chapter we will learn how to perform all these actions and many others which will give us full control on how the animation is used inside our React Native app.

Chapter 11, Any Questions? lottie-react-native FAQs, is a compilation of the most frequently asked questions when working with the lottie-react-native library. This list provides concrete answers from the library maintainer to the most common issues and challenges when using the library. The list is order by popularity and should serve as a quick reference guide not only for new developers but also for experienced engineers who got stuck in complex problems using this library.

lock icon The rest of the chapter is locked
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