Table of Contents

Preface

Part 1 - Building a Foundation With After Effects and LottieFiles

Chapter 1: Get Started With Lottie

Technical requirements

How to use this book

Introduction to Lottie

Why is it called Lottie?

The man behind the scenes

What is Lottie?

Do you still need more reasons to start using Lottie?

What is LottieFiles?

What can I do with LottieFiles?

Tools to create Lottie animations and integrations

Adobe After Effects

The Lottie extension for Adobe Animate

The LottieFiles platform

Summary

Chapter 2: Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation

Technical requirements

Introduction to 2D animation

The 12 principles of 2D animation

Squash and stretch

Anticipation

Staging

Straight-ahead action and pose-to-pose

Follow through and overlapping action

Ease in and ease out

Arcs

Secondary action

Timing

Exaggeration

Solid drawing

Appeal

Frames, keyframes, and inbetweens

Frames

Keyframes

Inbetweens

Timeline, timing, and ease

Timeline

Timing and ease

Drawing our icon

Storyboarding

Summary

Chapter 3: Learning the Tools: Getting Familiar With After Effects

Technical requirements

Getting to know the AE workspace

Customizing our workspace

Project panel

Understanding compositions

Timeline

Understanding layers

Type of layers

Layer properties

Animating using the Parent & Link option

Keyframes and animation

Exploring ease

Easy ease

Graph Editor

Summary

Part 2 - Cracking Lottie Animations

Chapter 4: Move It! Animating Our First Lottie With After Effects

Technical requirements

Creating your first project in Adobe AE – an animated check icon

Importing our icon to After Effects

Importing files from Sketch to AE

Importing files from Figma to AE

Exporting assets from XD to AE

UX animation workflow

Adjusting our icon composition settings

Understanding our check icon layers

Adding Keyframes

Changing scale

Adjusting the Opacity

Trim Paths

Working with radial bursts

Adding ease

Summary

Chapter 5: Share It With the World: Working With LottieFiles

Technical requirements

Exporting our animation for handoff

Exporting our animation using Bodymovin

Exporting our animation using LottieFiles

Creating a user account in LottieFiles

Exploring the LottieFiles dashboard

My Downloads

My Likes

My Public Animations

My Purchases

My Private Animations

The importance of testing in desktop and mobile LottieFiles platforms

Previewing .json files using the LottieFiles plugin for AE

Uploading and previewing .json files on the LottieFiles platform

Previewing our Lottie animations in the mobile LottieFiles app

Creating and editing a Lottie without using AE

Lottie URL

Lottie properties

Layers

Converting SVGs to animated Lotties in seconds

Converting Lottie to GIF in just one click

Creating your own personal stickers for Telegram

Summary

Chapter 6: Don’t Stop! Exploring Plugins and Resources That Will Keep You Going

Technical requirements

Downloading and installing the necessary plugins and tools

Downloading and installing Adobe AE

Downloading and installing the Bodymovin plugin for AE

Downloading and installing the LottieFiles plugin for AE

Downloading and installing the AEUX plugin for Sketch and Figma

Installing ZXP Extension Manager

The LottieFiles platform

Supported Lottie features for iOS, Android, and the web

Shapes

Fills

Strokes

Transforms

Interpolation

Masks

Mattes

Merge paths

Layer effects

Text

Other

Keyboard shortcuts that will make your life easier

General shortcuts

Transform properties shortcuts

Frames and keyframes shortcuts

Layers shortcuts

Free graphic resources and UX/UI inspiration

Graphic resources

UX/UI inspiration

Summary

Part 3 - Adding Your Lottie Animations Into Mobile Apps

Chapter 7: An Introduction to lottie-react-native

How did lottie-react-native come into being?

What is lottie-react-native?

Why are we not using Animated or Reanimated?

The basics of lottie-react-native

The open source project

Platforms

Versions

The npm package

Summary

Chapter 8: Installing lottie-react-native

Basic installation

Using npm

Using Yarn

Other dependencies of lottie-react-native

Installation requirements

iOS devices

Android devices

Limited features of the lottie-react-native library

Installing previous versions

Summary

Chapter 9: Let’s Do Some Magic: Integrating Your First Lottie Animation

Understanding the Lottie file elements

Using a Lottie file in a React Native app

Using lottie-react-native in your TypeScript app

Finding documentation for lottie-react-native

Using remote Lottie files

Using Lottie files with assets

Summary

Chapter 10: How To Nail It: Controlling Your Animation

Technical requirements

The declarative API

speed

onAnimationFinish

colorFilters

textFiltersAndroid and textFiltersIOS

The imperative API

Summary

Chapter 11: Any Questions? lottie-react-native FAQs

1. I added an effect to my animation but it's not rendered in the app

2. The animation is not rendered at all in my app

3. The animation looks stretched

4. How can I pause an animation?

5. How can I reverse an animation?

6. My animation is rendered on an iOS device but not on an Android device

7. My animation is rendered on an Android device but not on an iOS device

8. My app won't build on iOS after installing lottie-react-native

9. Some frames are not showing in my animation

10. My animation is showing the wrong colors or no colors at all

11. How can I use my Lottie animation as a splash screen?

12. There are images missing in my animation

13. How can I center my animation in the app?

14. How can I play my animation a set number of times?

15. My animation has a low playback performance

16. How can I change the colors of my animation programmatically?

17. How can I use a remote Lottie animation file in my app?

18. My app is crashing on Android

19. An error shows on my app – Cycle dependencies between targets

20. An error shows on my app – Execution failed for task ':lottie-react-native:compileDebugJavaWithJavac'

Summary

Why subscribe?

Other Books You May Enjoy