Animate everything - How to use Animations with 60 fps

Kuttig says animations should improve the user experience, not just decorate an app. Examples include showing progress during a three-second press, indicating loading, transforming a scrolling header, and drawing attention to part of a screen.

In the general React Native architecture, JavaScript and native rendering communicate through a bridge. For a scroll animation, values may travel across that bridge every 16 milliseconds; heavy JavaScript work can block interaction and cause dropped frames.

Kuttig recommends React Native's Animated API for straightforward effects such as fades and scroll-linked headers. Enabling the native driver sends animation rules to the native thread, avoiding per-frame trips through JavaScript. The driver supports properties such as opacity and transforms, but not layout changes like height.

Lottie plays animation data exported from After Effects with the Bodymovin plugin, and its React Native component can also be controlled by scroll progress. It suits detailed sequences such as avatar animations, especially when a designer can create the animation. Code can control playback, but changing the animation's visual details requires editing the source file.

Reanimated 2 uses worklets that run on the UI thread, along with shared values and hooks such as useAnimatedStyle. Kuttig shows scroll-linked effects that can change layout properties such as height, and recommends Reanimated for complex animations requiring developer control. He suggests choosing Lottie when creating the animation in After Effects is faster and full code control is unnecessary.