An important aspect of any quality mobile app is the fluidity of the user interface. Animations are used to provide a rich user experience, and any jank or jitter can negatively affect this. Animations will likely be used for all kinds of interactions, from changing between views, to reacting to a user's touch interaction on a component. One of the most important factors in creating high-quality animations is making sure that they do not block the JavaScript thread. To keep animations fluid and not interrupt UI interactions, the render loop has to render each frame in 16.67 ms, so that 60 FPS can be achieved.
In this recipe, we will take a look at several techniques for improving the performance of animations. These techniques focus in particular on preventing JavaScript execution from interrupting the main thread.
