Skip to main content
The #lottie command imports Lottie animation files into your app. Lottie animations are lightweight, resolution-independent, and look sharp on every screen size — a far better option than GIFs for app animations.

What It Does

When you use #lottie, the AI:
  1. Adds the Lottie JSON animation file to your project
  2. Automatically adds the Lottie Swift package as a dependency (if not already present)
  3. Creates a view that plays the animation where you describe
Nativeline automatically adds the Lottie package to your project when you use #lottie for the first time. You don’t need to set up any dependencies manually.

Supported Formats

Where to Get Lottie Animations

How to Use

1

Type #lottie in the chat

Type # and select lottie from the toolkit popover.
2

Select your animation file

The file picker opens, filtered to JSON files. Choose the Lottie animation you want to add.
3

Describe where to show it

The file appears as an orange chip below the input. Tell the AI where and how to display the animation.
4

Send your message

Press Enter. The AI adds the Lottie dependency (if needed), bundles the animation, and displays it as described.

Example Prompts

Why Lottie Over GIFs?

Lottie animations are lightweight and resolution-independent — much better than GIFs for app animations. A complex animation that would be several MB as a GIF is often just a few KB as a Lottie file.

Common Use Cases

Replace boring spinners with branded loading animations. Play them on loop while content loads.
Make empty screens feel alive with a subtle animation instead of a static illustration.
Play a checkmark or confetti animation when a user completes an action. These small moments of delight make your app feel polished.
Animate your onboarding illustrations to better explain features and hold user attention.

Toolkit Overview

See all available # commands and how the toolkit works.

#image — Add Images

Import static images into your app’s asset catalog.