Animation Component

Overview

The animation component is powered by Lottie. It 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

Property	Description	Data Type
Animation	The name of the JSON animation file you want to display	Text
Loop	Toggle whether or not the animation loops	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.	Select from list [Stretch, Float in Place]

Animation Blocks

Event Block

When Animation Click

This event fires when the user clicks on the animation component. You can trigger actions to occur when the animation is clicked.

Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).