Baking Expressions to Keyframes for Lottie Animation in iOS/Android Apps

Baking expressions to keyframes is a technique that can be used to convert expressions in After Effects to keyframes. It is useful when trying to use Lottie animation in iOS/Android apps. Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and web.

When an expression is baked to keyframes, it is converted into a set of keyframes. This process is lengthy and time-consuming but necessary for Lottie animation. The reason for this is that Lottie library on iOS/Android does not support javascript expressions, so we need to convert them into keyframes to use them in our mobile apps.

<aside> ✳️ NOTE Baking expressions to keyframes will break the layer controller after it's done. It will remove all unanimated expression and all shape's faces that are never visible. Therefore, it's essential to keep a backup of your original project before baking expressions to keyframes.

</aside>

Baking expressions to keyframes is a necessary step when using Lottie animation in iOS/Android apps. Although it's a lengthy process, it's worth it to achieve high-quality animation in mobile apps. Just remember to keep a backup of your original project before baking expressions to keyframes.

When you press the Bake button you will be presented with a dialog which allows you to set a "Step Value" for the baking process. This value determines how many keyframes will be created based on each N'th step, and applies to all properties that are animated except for paths. For paths, it's important to use a step value of 1, as they will lose accuracy if baked in any other mode.

<aside> ✳️ NOTE If you select the layer that you want baked, Extrudalizer will process just the layer (and associated ArtMapped layers, if any). You can also select all the layers in the composition and if there are multiple Extrudalized layers (even if they are precomposed), all layers will be processed sequentually.

</aside>

ScreenShot 2023-05-23 at 20.57@2x.jpg

While the other keyframed properties may lose some accuracy when using a step value higher than 1, the automatic interpolation will account for most of it. It's important to keep in mind that using a higher step value will reduce the size of the Lottie animation, which can be beneficial for mobile apps with limited resources.