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
UI Animations with Lottie and After Effects
UI Animations with Lottie and After Effects

UI Animations with Lottie and After Effects: Create, render, and ship stunning animations natively on mobile with React Native

eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

UI Animations with Lottie and After Effects

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

Technical requirements

As mentioned earlier, in this chapter, we are going to talk about the essential tools we will need during the process of creating a Lottie animation. Most of these tools are free for you to use. Note that Adobe After Effects is not available for free; however, you can download a 7-day free trial version.

Additionally, you will require a browser of your choice, for example, Chrome or Safari.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore key principles of storytelling, 2D digital animation, and design thinking
  • Create animations in After Effects, learn how to export them with both Bodymovin and LottieFiles plugins, and tweak them using the LottieFiles platform
  • Understand how to implement Lottie animations with React Native

Description

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.

Who is this book for?

This book is for developers and engineers who are already familiar with React Native, as well as UX and UI designers who want to create their own animations and integrate them with their platforms through React Native. Basic knowledge of JavaScript programming is assumed. Beginner-level illustration skills are also preferred, although not necessary.

What you will learn

  • Get started with Lottie and integrate animations either by creating them from scratch or by downloading them through LottieFiles
  • Explore the key principles of 2D classic animation
  • Understand the basics to create your first animation using After Effects
  • Export your animations into Lottie JSON files through Bodymovin
  • Integrate your very first Lottie icon animation inside your React Native app
  • Control your animation within the app through React APIs, while exploring best practices and common pitfalls

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 30, 2022
Length: 302 pages
Edition : 1st
Language : English
ISBN-13 : 9781803234441
Languages :
Concepts :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Product feature icon AI Assistant (beta) to help accelerate your learning
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jun 30, 2022
Length: 302 pages
Edition : 1st
Language : English
ISBN-13 : 9781803234441
Languages :
Concepts :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 135.97
Taking Blender to the Next Level
€59.99
UI Animations with Lottie and After Effects
€41.99
Responsive Web Design with HTML5 and CSS
€33.99
Total 135.97 Stars icon

Table of Contents

15 Chapters
Part 1 - Building a Foundation With After Effects and LottieFiles Chevron down icon Chevron up icon
Chapter 1: Get Started With Lottie Chevron down icon Chevron up icon
Chapter 2: Creating the Illusion: Get Rolling With the Basic Principles of 2D Classic Animation Chevron down icon Chevron up icon
Chapter 3: Learning the Tools: Getting Familiar With After Effects Chevron down icon Chevron up icon
Part 2 - Cracking Lottie Animations Chevron down icon Chevron up icon
Chapter 4: Move It! Animating Our First Lottie With After Effects Chevron down icon Chevron up icon
Chapter 5: Share It With the World: Working With LottieFiles Chevron down icon Chevron up icon
Chapter 6: Don’t Stop! Exploring Plugins and Resources That Will Keep You Going Chevron down icon Chevron up icon
Part 3 - Adding Your Lottie Animations Into Mobile Apps Chevron down icon Chevron up icon
Chapter 7: An Introduction to lottie-react-native Chevron down icon Chevron up icon
Chapter 8: Installing lottie-react-native Chevron down icon Chevron up icon
Chapter 9: Let’s Do Some Magic: Integrating Your First Lottie Animation Chevron down icon Chevron up icon
Chapter 10: How To Nail It: Controlling Your Animation Chevron down icon Chevron up icon
Chapter 11: Any Questions? lottie-react-native FAQs Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5
(2 Ratings)
5 star 50%
4 star 50%
3 star 0%
2 star 0%
1 star 0%
Arun Jul 27, 2022
Full star icon Full star icon Full star icon Full star icon Full star icon 5
If you are someone already equipped with react native, this is a perfect book to learn and understand Lottie animations.
Amazon Verified review Amazon
ALEN MARTIN Aug 01, 2022
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
If you are beginner in this field and your are really wishing to learn something new then this is your best option. Highly recommended, just go for it.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.