UI Animations with Lottie and After Effects

Chapter 10: How To Nail It: Controlling Your Animation

At this point, we have a fully functional animation in our React Native app that starts playing as a loop when it is mounted and stops when unmounted. But what if we want to control the playback of the animation? Let's give an example: we need to display the animation of a loading bar while we sequentially download five different files into our app. The loading bar will show the progress of the downloading files by filling itself (20% more each time a file is downloaded), resulting in a fully filled bar once those five files have been downloaded.

Figure 10.1 – Animated loading bar used ...