Search icon CANCEL
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

Adding ease

Now that we've got our animation up and running, let's nail it by adding some Ease. Remember the anticipation principle we talked about back in Creating the illusion: Get Rolling with the Basic Principles of 2D Classic Animation? That's what we can achieve with Ease: the perception of acceleration and slowing down with just one click. And, this little tweak is going to make our animation look much nicer, smoother, and professional. Here's how to do it:

  1. Open up the Oval layer to reveal its keyframes.
  2. Go to the timeline, right-click on the Scale keyframe 0, and select Keyframe Assistant | Easy Ease Out.

Figure 4.47 – Right-click on the Keyframe menu view

Now, let's do the same with the last keyframe, the one placed at frame :1.

  1. Go to the timeline, right-click on the Scale keyframe 21, and select Keyframe Assistant | Easy Ease Out.
  2. For the second keyframe, the one placed at frame 18, let&apos...
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 €18.99/month. Cancel anytime