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

Content preview from UI Animations with Lottie and After Effects

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

Our app is now ready to display Lottie animations on its screens. In this chapter, we will learn how to integrate a Lottie file, whether downloaded from https://lottiefiles.com/ or generated by us in Adobe After Effects (AE). The requirements to perform this integration successfully are as follows:

Have a JSON file with the Lottie animation exported from AE using the Bodymovin plugin or downloaded from LottieFiles.
Have the React Native project ready after having followed the steps described in Chapter 8, Installing lottie-react-native.

The final result will be our app displaying the provided Lottie animation on the initial screen. The topics we will cover in this chapter ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

After Effects for Designers

Chris Jackson

Cartooning Made Easy: Circle, Triangle, Square

Margherita Cole

Mastering Adobe Animate 2023 - Third Edition

Joseph Labrecque

Tips for Designing Effective Presentation Slide Decks

Curtis Newbold

Publisher Resources

ISBN: 9781803243801Supplemental Content