LottieAnimation - Offline/Online - Play animation using raw json, asset or url
An extension for MIT App Inventor, Kodular, Niotron & All AI2 Based No-code App Builders.
Supports loading from URL, assets, or raw JSON text. Works in Companion and APK on Android 5.0+.
Extension Details
Package: com.lottieanimation.ext
Lottie SDK Version: 6.7.1
Size: 609.00 KB
Minimum API Level: 21
Updated On: 2026-07-17
Built using: AIXER
Trial Extension and AIA included.
Extension Features
- Online/Offline Lottie Animation
- Modern Compressed Lottie Files Support
- Custom Choice Colors Modification Using Layer Filter Method
- Companion App Supported
- Load Lottie From Raw JSON Text, Asset or URL
Events:
LottieAnimation has total 6 events.
ArrangementRegistered
Fired when the arrangement has been registered and the view is ready.
AnimationLoaded
Fired when the animation has been loaded and is ready to play.
AnimationStarted
Fired when the animation starts playing.
AnimationEnded
Fired when the animation finishes playing (one iteration, not applicable if looping).
AnimationLooped
Fired each time the animation loops (when Loop is enabled).
AnimationError
Fired when the animation fails to load with an error message.
| Parameter | Type |
|---|---|
| message | text |
Methods:
LottieAnimation has total 24 methods.
RegisterArrangement
Register an arrangement (HorizontalArrangement or VerticalArrangement) to host the Lottie animation.
| Parameter | Type |
|---|---|
| arrang | any |
ShowFromJson
Load and play a Lottie animation from a raw JSON text string.
| Parameter | Type |
|---|---|
| jsonText | text |
ShowFromUrl
Load and play a Lottie animation from a URL.
| Parameter | Type |
|---|---|
| urlString | text |
ShowFromAssets
Load and play a Lottie animation from an asset file (e.g. animation.json).
| Parameter | Type |
|---|---|
| filename | text |
Play
Start or resume the animation.
Pause
Pause the animation at the current frame.
Stop
Stop the animation and reset to the first frame.
SetProgress
Set the animation progress to a specific fraction (0.0 to 1.0).
| Parameter | Type |
|---|---|
| progress | number |
SetFrame
Jump to a specific frame number. Animation will pause at that frame. Use GetTotalFrames to know the valid range.
| Parameter | Type |
|---|---|
| frame | number |
SetMinFrame
Set the minimum frame for playback. The animation will only play frames from this value onward.
| Parameter | Type |
|---|---|
| frame | number |
SetMaxFrame
Set the maximum frame for playback. The animation will only play frames up to this value.
| Parameter | Type |
|---|---|
| frame | number |
SetMinProgress
Set the minimum progress (0.0 to 1.0) for playback. The animation will only play from this progress point.
| Parameter | Type |
|---|---|
| progress | number |
SetMaxProgress
Set the maximum progress (0.0 to 1.0) for playback. The animation will only play up to this progress point.
| Parameter | Type |
|---|---|
| progress | number |
GetDuration
Returns the total duration of the animation in milliseconds.
GetCurrentFrame
Returns the current frame number of the animation.
GetTotalFrames
Returns the total number of frames in the animation.
SetColorFilter
Set a color filter on the animation using a color from the Colors drawer and an opacity percentage (0 = transparent, 100 = fully opaque).
| Parameter | Type |
|---|---|
| argbColor | number |
| opacityPercent | number |
SetLayerColorFilter
Set a color filter on a specific layer by name. Use GetLayerNames to discover layer names in your animation.
| Parameter | Type |
|---|---|
| layerName | text |
| argbColor | number |
| opacityPercent | number |
GetLayerNames
Returns a comma-separated list of layer names in the loaded animation. Use these names with SetLayerColorFilter.
ClearLayerColorFilter
Remove the color filter from a specific layer by name.
| Parameter | Type |
|---|---|
| layerName | text |
ClearColorFilter
Remove all applied color filters from the entire animation.
SetScale
Scale the animation view by a multiplier. 1.0 is original size, 2.0 is double, 0.5 is half.
| Parameter | Type |
|---|---|
| scale | number |
SetRepeatMode
Set the repeat mode. 1 = RESTART (starts over), 2 = REVERSE (plays backward on repeat). Only applies when Loop is enabled.
| Parameter | Type |
|---|---|
| mode | number |
Remove
Remove the Lottie animation view from the arrangement.
Properties:
LottieAnimation has total 4 properties.
Loop
Whether the animation should loop continuously.
| Property | Type | Default |
|---|---|---|
| Loop | boolean |
Speed
The playback speed multiplier. 1.0 is normal speed. 2.0 is double speed. 0.5 is half speed.
| Property | Type | Default |
|---|---|---|
| Speed | number |
AutoPlay
Whether the animation should start playing automatically after loading.
| Property | Type | Default |
|---|---|---|
| AutoPlay | boolean |
ScaleType
How the animation image fits within its container. 0=FIT_CENTER, 1=CENTER_CROP, 2=CENTER_INSIDE, 3=FIT_XY.
| Property | Type | Default |
|---|---|---|
| ScaleType | number |
Need any specific method/event to be added into this extension? please inform via DM.
Watch Demo Video:https://www.youtube.com/watch?v=e3IhACJhD-g
Trial Extension:
LottieAnimation.aix (606.0 KB)
Price: $ 5
Purchase Licensed Extension
Bharat Technologies 
(Extensions - Apps - Programs Developer)