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

Book Cover
Average Rating
Author
Ruiz, Mireia Alegre,
Published
Birmingham, UK : Packt Publishing Ltd., 2022.
Status
Available Online

Description

Understand and develop immersive animations along with animated stickers for Telegram using Bodymovin, After Effects and LottieFiles and integrate them in your React Native apps using this color guide to UI animations. 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.

More Details

Format
Edition
[First edition].
Language
English

Notes

Description
Understand and develop immersive animations along with animated stickers for Telegram using Bodymovin, After Effects and LottieFiles and integrate them in your React Native apps using this color guide to UI animations. 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.
Local note
O'Reilly O'Reilly Online Learning: Academic/Public Library Edition

Table of Contents

Cover
Title page
Copyright and Credits
Dedication
Contributors
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

Discover More

Catalog enrichment powered by Syndetics Unbound

More Like This

  • AI for games Cover
  • Blender all-in-one Cover
  • The complete guide to Blender graphics: computer modeling & animation.Volume 1 Cover
  • Blender quick start guide: 3D modeling, animation, and render with Eevee in Blender 2. 8 Cover
  • Adobe Animate classroom in a book: (2023 release) : the official training workbook from Adobe Cover
  • Adobe Animate CC 2017 release Cover
  • Beginning 3D game assets development pipeline: learn to integrate from Maya to Unity Cover
  • Shading, lighting, and rendering with Blender's EEVEE: learn how to create and iterate amazing concept art using a real-time rendering engine Cover
  • Directing game animation: building a vision and a team with intent Cover
  • Learn Blender simulations the right way: create attractive and realistic animations with Mantaflow, rigid and soft bodies, and dynamic paint Cover
  • Adobe Animate Classroom in a Book (2020 release) Cover
  • Beginning Adobe Animate CC: learn to efficiently create and deploy animated and interactive content Cover
  • Character rigging and advanced animation: bring your character to life using Autodesk 3ds Max Cover
  • Beginning VFX with Autodesk Maya: create industry-standard visual effects from scratch Cover
  • Lighting for animation: the art of visual storytelling Cover
  • The complete guide to Blender graphics: computer modeling & animation.Volume 2 Cover
  • Making the cut at Pixar: the art of editing animation Cover
  • Sculpting the Blender Way: Explore Blender's 3D Sculpting Workflows and Latest Features, Including Face Sets, Mesh Filters, and the Cloth Brush Cover
  • Adobe Animate Classroom in a book 2024 release: the official training workbook from Adobe Cover
  • Modeling and animation using Blender: Blender 2.80 : the rise of Eevee Cover
  • Immersive 3D design visualization: with Autodesk Maya and Unreal Engine 4 Cover
  • ANIMATING SWIFTUI APPLICATIONS: create visually stunning and engaging animations for iOS with SwiftUI Cover
  • MoCap for artists: workflow and techniques for motion capture Cover
  • Adobe Animate CC classroom in a book 2019 release: the official training workbook from Adobe Cover
  • Reimagining characters with unreal engine MetaHuman Creator: elevate your films with cinema quality character designs and animation Cover

Citations

APA Citation, 7th Edition (style guide)

Ruiz, M. A., & Martinez, E. R. (2022). UI animations with Lottie and After Effects: create, render, and ship stunning animations natively on mobile with React Native ([First edition].). Packt Publishing Ltd..

Chicago / Turabian - Author Date Citation, 17th Edition (style guide)

Ruiz, Mireia Alegre and Emilio Rodriguez, Martinez. 2022. UI Animations With Lottie and After Effects: Create, Render, and Ship Stunning Animations Natively On Mobile With React Native. Birmingham, UK: Packt Publishing Ltd.

Chicago / Turabian - Humanities (Notes and Bibliography) Citation, 17th Edition (style guide)

Ruiz, Mireia Alegre and Emilio Rodriguez, Martinez. UI Animations With Lottie and After Effects: Create, Render, and Ship Stunning Animations Natively On Mobile With React Native Birmingham, UK: Packt Publishing Ltd, 2022.

Harvard Citation (style guide)

Ruiz, M. A. and Martinez, E. R. (2022). UI animations with lottie and after effects: create, render, and ship stunning animations natively on mobile with react native. [First edn]. Birmingham, UK: Packt Publishing Ltd.

MLA Citation, 9th Edition (style guide)

Ruiz, Mireia Alegre,, and Emilio Rodriguez Martinez. UI Animations With Lottie and After Effects: Create, Render, and Ship Stunning Animations Natively On Mobile With React Native [First edition]., Packt Publishing Ltd., 2022.

Note! Citations contain only title, author, edition, publisher, and year published. Citations should be used as a guideline and should be double checked for accuracy. Citation formats are based on standards as of August 2021.

Staff View

Grouped Work ID
4791a320-62cb-cdfc-e953-810e58c225a2-eng
Go To Grouped Work View in Staff Client

Grouping Information

Grouped Work ID4791a320-62cb-cdfc-e953-810e58c225a2-eng
Full titleui animations with lottie and after effects create render and ship stunning animations natively on mobile with react native
Authorruiz mireia alegre
Grouping Categorybook
Last Update2025-01-24 12:33:29PM
Last Indexed2025-05-22 03:14:06AM

Book Cover Information

Image Sourcedefault
First LoadedAug 6, 2023
Last UsedApr 29, 2025

Marc Record

First DetectedMar 20, 2023 10:19:22 AM
Last File Modification TimeDec 17, 2024 08:21:32 AM
SuppressedRecord had no items

MARC Record

LEADER05948cam a22004337i 4500
001on1334601180
003OCoLC
00520241217081916.0
006m     o  d        
007cr cnu|||unuuu
008220706s2022    enka    o     000 0 eng d
035 |a (OCoLC)1334601180
037 |a 9781803243801|b O'Reilly Media
040 |a ORMDA|b eng|e rda|e pn|c ORMDA|d EBLCP|d OCLCF|d OCLCQ|d OCLCO
049 |a MAIN
050 4|a TR897.7
08204|a 006.6/96|2 23/eng/20220706
1001 |a Ruiz, Mireia Alegre,|e author.
24510|a UI animations with Lottie and After Effects :|b create, render, and ship stunning animations natively on mobile with React Native /|c Mireia Alegre Ruiz, Emilio Rodriguez Martinez.
250 |a [First edition].
264 1|a Birmingham, UK :|b Packt Publishing Ltd.,|c 2022.
300 |a 1 online resource (302 pages) :|b illustrations
336 |a text|b txt|2 rdacontent
337 |a computer|b c|2 rdamedia
338 |a online resource|b cr|2 rdacarrier
5050 |a Cover -- Title page -- Copyright and Credits -- Dedication -- Contributors -- 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
5058 |a 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
5058 |a 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
5058 |a 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
5058 |a 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
520 |a Understand and develop immersive animations along with animated stickers for Telegram using Bodymovin, After Effects and LottieFiles and integrate them in your React Native apps using this color guide to UI animations. 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.
590 |a O'Reilly|b O'Reilly Online Learning: Academic/Public Library Edition
650 0|a Computer animation.|9 34179
650 0|a Mobile computing.|9 70338
7001 |a Martinez, Emilio Rodriguez,|e author.
85640|u https://library.access.arlingtonva.us/login?url=https://learning.oreilly.com/library/view/~/9781803243801/?ar|x O'Reilly|z eBook
938 |a ProQuest Ebook Central|b EBLB|n EBL7008501
994 |a 92|b VIA
999 |c 283987|d 283987