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

FormatNotes
JSONLottie animation format (exported from After Effects or downloaded from LottieFiles)

​
Where to Get Lottie Animations

SourceNotes
LottieFilesThousands of free and premium animations, searchable by category
After Effects + BodymovinExport your own animations from Adobe After Effects using the Bodymovin plugin
LottieFiles editorCustomize colors and timing of existing animations in your browser

​
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

Use this as a loading spinner in the center of the screen

Play this animation when a task is completed

Show this animation on the empty state screen

Play this confetti animation when the user achieves a goal

Use this as the launch screen animation, play once then transition to the home screen

​
Why Lottie Over GIFs?

LottieGIF
File sizeTiny (JSON-based)Large (pixel data)
ResolutionScales perfectly to any sizePixelates when scaled
ColorsFull color spectrumLimited to 256 colors
PerformanceRendered by GPUDecoded frame by frame
InteractivityCan pause, reverse, seekPlay only
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.