Animation by Lottie

Animation Overview

The Animation component powered by Lottie makes adding animations as easy as adding images. For designers, animations can be created in Adobe After Effects or Haiku and imported as a .json file.

For the rest of us, there is a large and growing community of designers who have created free and editable animations that you can easily add to your app.

Video Tutorial

See a video tutorial for using Animations in your Thunkable project here:

Properties

Animation

PropertyDescriptionData Type

Animation

The name of a JSON animation you wish to display

Text

Loop

Toggle whether Animation loops or not

True/False

Layout

Property

Description

Data Type

X

Location of top left corner of Animation on X-axis, where the left hand side is X=0

Number

Y

Location of top left corner of Animation on Y-axis, where the top side is Y=0

Number

Height

Height of Animation in pixels

Number

Width

Width of Animation in pixels

Number

Resize Mode

Define dimensions of the animation component/container

Select from list [Stretch, Float in Place]

Blocks

Events

You can trigger some action to happen when the animation is clicked using the 'when Animation Click' event.

Properties

Change the properties of your Animation component

Animation

Loop

Computed Height

Returns the height of the Animation on the device screen in pixels.

Computed Width

Visible

Last updated

Change request #1203: