How to Add Lottie Animations to Your App

Add Rich Animations to Your App

Lottie animations are lightweight, scalable, and look amazing on mobile. Codular makes it easy to add them without code.

What is Lottie?

Lottie is a file format for vector animations. Designers create them in After Effects, and you use the exported JSON file in your app. They're:

• Tiny (a few KB vs MB for video)
• Scalable (look sharp at any size)
• Interactive (play, pause, loop, control speed)

Where to Find Lottie Files

• LottieFiles.com - thousands of free animations
• IconScout - premium animations
• Create your own in After Effects + Bodymovin plugin

Step 1: Upload Lottie File

• Go to Assets in the menu bar
• Click Upload Asset
• Select your .json Lottie file
• It appears in your assets with "lottie" type

Step 2: Add LottieAnimation Component

• Open Display category in the palette
• Drag Lottie Animation onto your screen
• In Properties:

- Source - click "Assets" to pick your uploaded file

- Auto Play - starts playing automatically

- Loop - repeats the animation

- Speed - 1 = normal, 2 = double speed, 0.5 = half speed

Step 3: Control with Flows

Use these flow nodes to control animations:

Example: Play animation on button press

Event (Button.onPress) → Play Lottie (componentId: "lottie_1")

Events

Use Cases

• Splash screens - animated logo on app launch
• Loading indicators - custom loading spinners
• Empty states - animation when no data found
• Success states - checkmark animation after purchase
• Onboarding - animated tutorials

Start building at mobcraft.in.