book

UI Animations with Lottie and After Effects

by Mireia Alegre Ruiz, Emilio Rodriguez Martinez

June 2022

Beginner

302 pages

5h 59m

English

Packt Publishing

Read now

Unlock full access

ContributorsAbout the authorsAbout the reviewers
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touchShare Your Thoughts
Technical requirementsHow to use this bookIntroduction to LottieWhy is it called Lottie? The man behind the scenesWhat 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 integrationsAdobe After EffectsThe Lottie extension for Adobe AnimateThe LottieFiles platformSummary
Technical requirementsIntroduction to 2D animationThe 12 principles of 2D animationSquash and stretchAnticipationStagingStraight-ahead action and pose-to-poseFollow through and overlapping actionEase in and ease outArcsSecondary actionTimingExaggerationSolid drawingAppealFrames, keyframes, and inbetweensFramesKeyframesInbetweensTimeline, timing, and easeTimelineTiming and easeDrawing our iconStoryboardingSummary
Technical requirementsGetting to know the AE workspaceCustomizing our workspaceProject panelUnderstanding compositionsTimelineUnderstanding layersType of layersLayer propertiesAnimating using the Parent & Link optionKeyframes and animationExploring easeEasy easeGraph EditorSummary
Technical requirementsCreating your first project in Adobe AE – an animated check iconImporting our icon to After EffectsImporting files from Sketch to AEImporting files from Figma to AEExporting assets from XD to AEUX animation workflowAdjusting our icon composition settingsUnderstanding our check icon layersAdding KeyframesChanging scaleAdjusting the OpacityTrim PathsWorking with radial burstsAdding easeSummary
Technical requirementsExporting our animation for handoffExporting our animation using BodymovinExporting our animation using LottieFilesCreating a user account in LottieFilesExploring the LottieFiles dashboardMy DownloadsMy LikesMy Public AnimationsMy PurchasesMy Private AnimationsThe importance of testing in desktop and mobile LottieFiles platformsPreviewing .json files using the LottieFiles plugin for AEUploading and previewing .json files on the LottieFiles platformPreviewing our Lottie animations in the mobile LottieFiles appCreating and editing a Lottie without using AELottie URLLottie propertiesLayersConverting SVGs to animated Lotties in secondsConverting Lottie to GIF in just one clickCreating your own personal stickers for TelegramSummary
Technical requirementsDownloading and installing the necessary plugins and toolsDownloading and installing Adobe AEDownloading and installing the Bodymovin plugin for AEDownloading and installing the LottieFiles plugin for AEDownloading and installing the AEUX plugin for Sketch and FigmaInstalling ZXP Extension ManagerThe LottieFiles platformSupported Lottie features for iOS, Android, and the webShapesFillsStrokesTransformsInterpolationMasksMattesMerge pathsLayer effectsTextOtherKeyboard shortcuts that will make your life easierGeneral shortcutsTransform properties shortcutsFrames and keyframes shortcutsLayers shortcutsFree graphic resources and UX/UI inspirationGraphic resourcesUX/UI inspirationSummary

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-nativeThe open source projectPlatformsVersionsThe npm packageSummary
Basic installationUsing npmUsing YarnOther dependencies of lottie-react-nativeInstallation requirementsiOS devicesAndroid devicesLimited features of the lottie-react-native libraryInstalling previous versionsSummary
Understanding the Lottie file elementsUsing a Lottie file in a React Native appUsing lottie-react-native in your TypeScript appFinding documentation for lottie-react-nativeUsing remote Lottie filesUsing Lottie files with assetsSummary
Technical requirementsThe declarative APIspeedonAnimationFinishcolorFilterstextFiltersAndroid and textFiltersIOSThe imperative APISummary
1. I added an effect to my animation but it's not rendered in the app2. The animation is not rendered at all in my app3. The animation looks stretched4. 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 device7. My animation is rendered on an Android device but not on an iOS device8. My app won't build on iOS after installing lottie-react-native9. Some frames are not showing in my animation10. My animation is showing the wrong colors or no colors at all11. How can I use my Lottie animation as a splash screen?12. There are images missing in my animation13. 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 performance16. 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 Android19. An error shows on my app – Cycle dependencies between targets20. An error shows on my app – Execution failed for task ':lottie-react-native:compileDebugJavaWithJavac'Summary
Other Books You May EnjoyPackt is searching for authors like youShare Your Thoughts

Overview

Master the art of creating mobile-friendly animations using Lottie and Adobe After Effects. In this book, you'll explore foundational 2D animation techniques, learn how to export animations as JSON files with Bodymovin, and integrate them seamlessly into React Native apps.

What this Book will help me do

Understand the Lottie ecosystem and learn how to export animations using the Bodymovin plugin for After Effects.
Master the principles of 2D design and animation to create engaging visuals.
Integrate Lottie animations into React Native applications for smooth, native-like performance.
Leverage LottieFiles for sharing, testing, and refining your animation projects.
Gain hands-on skills with animation control and customization within mobile apps using React APIs.

Author(s)

None Ruiz and None Martinez are experienced multimedia creators and educators with a focus on interactive designs and animations. Drawing from their technical expertise and years of hands-on development, they provide readers with practical insights into creating animations with Lottie and integrating them into React Native projects. Their approach emphasizes accessibility and applicability for developers and designers alike.

Who is it for?

This book is ideal for developers and engineers familiar with React Native who aim to enrich their applications with animations. It's also perfect for UX and UI designers keen on creating animations for their React Native-based platforms. A foundational understanding of JavaScript programming will enhance the learning experience.