You can also animate UI components using States (see Screen and Container states) and the Timeline. You need a State 1 (start state) and a State 2 (next state). You will be designing the animation that will take you from State 1 to State 2. For this, you can work on the timeline and the layers list there to change their individual properties (they expand/collapse when you click on the little arrow) and set the duration of the animation, delay (time after which to start), and easing function (type of animation). Each layer and property can be treated separately. See Easings for more on tailoring your animations.
You will also need to create a trigger for taking you from the Start state to the Next state. This can be any UI component that appears in Start state on which you create an interaction “on event <choose_an_event> change state to <end_state>”.
You can preview your animation straight away by clicking on Play. You also have the Rewind and Jump to end buttons that are particularly useful for longer animations. You can also drag the Playhead to the position you want.
The Reverse checkbox appears when you create the opposite of a particular transition, e.g. when you have a transition 'From <State 1> To <State 2>' and you then create the transition 'From <State 2> To <State 1>'. When you check Reverse you will see that the reverse of transition 'From <State 1> To <State 2>' is brought up in your timeline automatically. You can still edit this as you like. If you later uncheck that checkbox, that transition is removed from the timeline and any previous transition is restored.
In the timeline you can see the following indicators:
|
Transition with 0ms duration. Drag the grey handles to increase duration. Drag and move from the middle to the move position. |
![]() |
Transition with duration (e.g. 90ms). Drag the grey handles to change duration. Drag and move from the middle to the move position. |
![]() |
Instant. Transition can't be applied to this UI item/property. |
![]() |
Instant. The UI item/property is re-rendered at this point. |
'On transition start' and 'On transition end' interactions can be added (and edited) from the little lightning icons at the beginning and at the end of the transition (in the timeline).