Animation Component
Last updated
Last updated
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.
See a video tutorial for using animations in your Thunkable project here:
Animation
The name of the JSON animation file you want to display
Text
Loop
Toggle whether or not the animation loops
True/False
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]
This event fires when the user clicks on the animation component. You can trigger actions to occur when the animation is clicked.
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.).
