From Jitter to Lottie (.json): Creating high-quality animations for your KMP app

Over the last few years, vector animations have become an essential part of modern app design. They help apps feel smoother, more dynamic, and more polished — whether you’re building with *Kotlin Multiplatform, SwiftUI, React Native, Flutter, or even the web*. Tools like Lottie make this possible without compromising performance or significantly increasing your app’s size.

However, creating these animations hasn’t always been simple. For a long time, Lottie workflows depended heavily on Adobe After Effects — a powerful tool, but a barrier for many who don’t work with professional motion-design software.

This is where Jitter comes in. Thanks to this animation platform, it’s now possible to create complex, high-quality animations without any After Effects knowledge. Jitter lets you design motion graphics, micro-interactions, and animated content using vector elements, text, and images — all through an intuitive workflow: drag, animate, export. The learning curve is impressively low.

In this article, we’ll walk through the full workflow: how to create animations with Jitter, how to export them as Lottie (.json), and finally, how to integrate them into your applications — in this case, within a Kotlin Multiplatform project.

Types of Animations in Jitter

Before jumping into the practical example, let’s take a quick look at the types of animations available in Jitter.

Jitter organizes its animations into three main categories, making it easier to create clean transitions and micro-interactions without needing advanced motion-design knowledge. Each tab is designed for a specific moment in an element’s lifecycle within the animation, allowing you to work in a more intuitive and structured way.

IN — Entry Animations

The IN tab contains ready-made animations created for the exact moment an element comes into view. They determine how a layer moves from being invisible or positioned off-screen to becoming fully visible in its final spot. These animations help set the visual pacing and draw the user’s eye to whatever is entering the scene.

OUT — Exit Animations

The OUT tab defines how an element is removed from the screen. These animations handle the moment an object stops being visible, ensuring it leaves the scene in a smooth, intentional way rather than abruptly disappearing.

CUSTOM — Custom Animations

The CUSTOM tab is where Jitter really unleashes its full creative power. Instead of relying on predefined presets, you gain complete freedom to animate any visual property of an element — position, scale, opacity, rotation, color, and more — each with its own timing and easing. This level of control allows you to craft highly tailored movements, layer different effects, and build complex sequences that go far beyond the simple IN and OUT transitions.

Creating an Animation in Jitter (Step by Step)

To really grasp what Jitter can do, it’s not enough to just explore its tools or understand the different animation types — you need to see them in action.

In this section, we’ll go through the entire animation process, showing how to bring an element to life and how to layer multiple effects within the platform.

The video below demonstrates a simple animation, designed so you can follow along easily, step by step.

[embed]

Result:

Below are some slightly more complex animations that I created with Jitter.

To create the animations above, I designed some vector elements in Figma, while others I designed them directly in Jitter. This combination allowed me to take advantage of both tools before integrating everything into the final animations.

Exporting Animations from Jitter to Lottie

Once your animations are ready, Jitter provides multiple export options, including MP4, GIF, SVG, and Lottie-compatible .json files. Lottie is ideal for integrating animations into apps due to its small size, performance, and scalability, making the workflow fast, clean, and accessible — even for those without prior motion-design experience.

Integrating Lottie Animations in KMP

After exporting your animation in Lottie (.json) format, the next step is to bring it into your application. Although KMP lets you share a large portion of code and logic across platforms, you still need a solution that can play Lottie animations consistently on every platform.

For this, we’ll use **Compottie**, a library designed for Kotlin Multiplatform that supports Lottie animations on different platforms. To get started, here’s a simple step-by-step guide to using the library:

Step 1: Add the required dependencies to your multiplatform module.

[versions]
compottie="2.0.2" //Check if there's a new version

[libraries]
compottie = { module = "io.github.alexzhirkevich:compottie", version.ref = "compottie" }

sourceSets {
  commonMain.dependencies {
      implementation(libs.compottie)
  }
}

Step 2: Add the animation’s .json file to the composeResources directory inside commonMain.

commonMain/
    composeResources/
        files/
           loading_animation.json

Step 3: Finally, add the animation to your screen and try it out!

@Composable
internal fun CustomLottieAnimation() {

  val composition by rememberLottieComposition {
      LottieCompositionSpec.JsonString(
          Res.readBytes("files/loading_animation.json").decodeToString()
      )
  }
  val progress by animateLottieCompositionAsState(
      composition = composition,
      speed = 1.5f
  )

  Image(
      modifier = Modifier.size(200.dp)
      painter = rememberLottiePainter(
          composition = composition,
          progress = { progress },
      ),
      contentDescription = "Custom Lottie animation"
  )

}

Result:

Conclusion

In this article, we explored how to create high-quality animations for any app using Jitter. We covered how to design vector-based animations, work with IN, OUT, and CUSTOM animation types, and export them as Lottie .json files ready for integration. We also saw how to bring these animations into your Kotlin Multiplatform project using **Compottie**, making them run smoothly on Android and iOS.

Thanks to this workflow, it’s possible to turn complex motion ideas into lightweight, scalable animations while maintaining full control over timing, easing, and visual style. You now have a practical, accessible way to enhance your apps — without needing to master After Effects. Hope you enjoyed the article, and happy animating and coding!