Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying UI Animations with Lottie and After Effects
  • Table Of Contents Toc
  • Feedback & Rating feedback
UI Animations with Lottie and After Effects

UI Animations with Lottie and After Effects

By : Ruiz, Martinez
4.5 (2)
Buy this Book
close
close
UI Animations with Lottie and After Effects

UI Animations with Lottie and After Effects

4.5 (2)
By: Ruiz, Martinez
Buy this Book

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)
close
close
close
Preface
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Download the example code files
Icon
Download the color images
Icon
Conventions used
Icon
Get in touch
Icon
Share Your Thoughts
1
Part 1 - Building a Foundation With After Effects and LottieFiles
Icon
Part 1 - Building a Foundation With After Effects and LottieFiles
Free Chapter
2
Chapter 1: Get Started With Lottie
chevron up
Icon
Chapter 1: Get Started With Lottie
Icon
Technical requirements
Icon
How to use this book
Icon
Introduction to Lottie
Icon
What is LottieFiles?
Icon
Tools to create Lottie animations and integrations
Icon
Summary
3
Chapter 2: Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation
Icon
Chapter 2: Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation
Icon
Technical requirements
Icon
Introduction to 2D animation
Icon
The 12 principles of 2D animation
Icon
Frames, keyframes, and inbetweens
Icon
Timeline, timing, and ease
Icon
Drawing our icon
Icon
Storyboarding
Icon
Summary
4
Chapter 3: Learning the Tools: Getting Familiar With After Effects
Icon
Chapter 3: Learning the Tools: Getting Familiar With After Effects
Icon
Technical requirements
Icon
Getting to know the AE workspace
Icon
Understanding layers
Icon
Animating using the Parent & Link option
Icon
Exploring ease
Icon
Summary
5
Part 2 - Cracking Lottie Animations
Icon
Part 2 - Cracking Lottie Animations
6
Chapter 4: Move It! Animating Our First Lottie With After Effects
Icon
Chapter 4: Move It! Animating Our First Lottie With After Effects
Icon
Technical requirements
Icon
Creating your first project in Adobe AE – an animated check icon
Icon
Importing our icon to After Effects
Icon
UX animation workflow
Icon
Adjusting our icon composition settings
Icon
Understanding our check icon layers
Icon
Adding Keyframes
Icon
Trim Paths
Icon
Working with radial bursts
Icon
Adding ease
Icon
Summary
7
Chapter 5: Share It With the World: Working With LottieFiles
Icon
Chapter 5: Share It With the World: Working With LottieFiles
Icon
Technical requirements
Icon
Exporting our animation for handoff
Icon
Creating a user account in LottieFiles
Icon
Exploring the LottieFiles dashboard
Icon
The importance of testing in desktop and mobile LottieFiles platforms
Icon
Creating and editing a Lottie without using AE
Icon
Converting SVGs to animated Lotties in seconds
Icon
Converting Lottie to GIF in just one click
Icon
Creating your own personal stickers for Telegram
Icon
Summary
8
Chapter 6: Don’t Stop! Exploring Plugins and Resources That Will Keep You Going
Icon
Chapter 6: Don’t Stop! Exploring Plugins and Resources That Will Keep You Going
Icon
Technical requirements
Icon
Downloading and installing the necessary plugins and tools
Icon
Supported Lottie features for iOS, Android, and the web
Icon
Keyboard shortcuts that will make your life easier
Icon
Free graphic resources and UX/UI inspiration
Icon
Summary
9
Part 3 - Adding Your Lottie Animations Into Mobile Apps
Icon
Part 3 - Adding Your Lottie Animations Into Mobile Apps
10
Chapter 7: An Introduction to lottie-react-native
Icon
Chapter 7: An Introduction to lottie-react-native
Icon
How did lottie-react-native come into being?
Icon
What is lottie-react-native?
Icon
Why are we not using Animated or Reanimated?
Icon
The basics of lottie-react-native
Icon
Summary
11
Chapter 8: Installing lottie-react-native
Icon
Chapter 8: Installing lottie-react-native
Icon
Basic installation
Icon
Other dependencies of lottie-react-native
Icon
Installation requirements
Icon
Limited features of the lottie-react-native library
Icon
Installing previous versions
Icon
Summary
12
Chapter 9: Let’s Do Some Magic: Integrating Your First Lottie Animation
Icon
Chapter 9: Let’s Do Some Magic: Integrating Your First Lottie Animation
Icon
Understanding the Lottie file elements
Icon
Using a Lottie file in a React Native app
Icon
Using lottie-react-native in your TypeScript app
Icon
Finding documentation for lottie-react-native
Icon
Using remote Lottie files
Icon
Summary
13
Chapter 10: How To Nail It: Controlling Your Animation
Icon
Chapter 10: How To Nail It: Controlling Your Animation
Icon
Technical requirements
Icon
The declarative API
Icon
The imperative API
Icon
Summary
14
Chapter 11: Any Questions? lottie-react-native FAQs
Icon
Chapter 11: Any Questions? lottie-react-native FAQs
Icon
1. I added an effect to my animation but it's not rendered in the app
Icon
2. The animation is not rendered at all in my app
Icon
3. The animation looks stretched
Icon
4. How can I pause an animation?
Icon
5. How can I reverse an animation?
Icon
6. My animation is rendered on an iOS device but not on an Android device
Icon
7. My animation is rendered on an Android device but not on an iOS device
Icon
8. My app won't build on iOS after installing lottie-react-native
Icon
9. Some frames are not showing in my animation
Icon
10. My animation is showing the wrong colors or no colors at all
Icon
11. How can I use my Lottie animation as a splash screen?
Icon
12. There are images missing in my animation
Icon
13. How can I center my animation in the app?
Icon
14. How can I play my animation a set number of times?
Icon
15. My animation has a low playback performance
Icon
16. How can I change the colors of my animation programmatically?
Icon
17. How can I use a remote Lottie animation file in my app?
Icon
18. My app is crashing on Android
Icon
19. An error shows on my app – Cycle dependencies between targets
Icon
20. An error shows on my app – Execution failed for task ':lottie-react-native:compileDebugJavaWithJavac'
Icon
Summary
Icon
Why subscribe?
15
Other Books You May Enjoy
Icon
Other Books You May Enjoy
Icon
Packt is searching for authors like you
Icon
Share Your Thoughts

Chapter 1: Get Started With Lottie

Nowadays, vector animation is used in almost every single mobile app and website. It enriches a good UX design, helps designers guide users through interactions, and brings any screen to life.

However, adding animations to our web, iOS, Android, or React Native applications wasn't always as easy as you would think. Back then, implementing animations used to be very time-consuming and would greatly increase the size of files. But then one day, Lottie was finally released, and light and color came into the world of animations, especially for mobile apps and websites.

In this chapter, we will show you how to use this book so that you can make the most of it. Also, you will learn what Lottie is, why it was created, and the great value that it provides to both designers and developers.

You will be introduced to the LottieFiles platform, what it is used for, and the difference between Lottie animations and LottieFiles.

Additionally, you will get to know the tools you are going to need to create Lottie animations and where to get them from.

By the end of this chapter, you will have complete knowledge of what a Lottie animation is and how it makes life easier for designers and developers. Also, you will gain an understanding of what the LottieFiles platform is used for and where to get all the essential tools so that you can be ready to start thinking about your first animation.

In this chapter, we are going to cover the following main topics:

  • How to use this book
  • Introduction to Lottie
  • What are LottieFiles?
  • Understanding the tools to create Lottie animations
End of Section 1
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY