Animation

anyui-LIVE lets you animate widget properties over time and start those animations from widget events. This guide explains how to build an animation, how to play it, and what depends on the project's LVGL version.

Overview

An animation is a named asset that belongs to the whole project, so the same animation can be played from any screen and from as many events as you need.

Concept	What it holds	Where you edit it
Animation	A named timeline, plus playback options such as repeat, delay and direction.	Animation tab of the bottom panel
Track	One property of one widget, for example the opacity of a panel.	Animation tab of the bottom panel
Step	One value change on a track: when it begins, how long it runs, which values it moves between, and how it eases.	Animation tab of the bottom panel
Inline animation	A single property, authored directly on the event action that plays it.	Event tab of the inspector
Screen transition	The animation used when the project changes screen.	Event tab of the inspector

Creating an animation

Open the Animation tab of the bottom panel, and select the widget you want to move on the canvas if you have one in mind.
Click + (New animation) at the top of the Animations list. The panel is split into three areas: the animation list on the left, the timeline in the middle, and the editing options on the right.
The new animation starts with one track already filled in - the X position of the widget you selected, moving from 0 to 100 in 300 ms. When a screen or nothing at all was selected, the first widget in the project is used instead. Under Track 1, set the Widget and the Property this track moves.
Click Add step to add a value change, and set its Start (ms), timing, From and To values, and Easing.
Set the animation-wide options under Playback.
Use Add track for another widget or property, and Add step for another movement on the same property, until the animation is complete. Each animation is listed with its size, such as 2 tracks · 800 ms, so you can see what you have without opening it.
Check the result in preview, then confirm it in the exported code with the code view.

Steps

Each step is one movement of one property:

Field	Meaning
Start (ms)	When the step begins, measured from the start of the animation.
Timing	Duration makes the step last exactly Duration (ms). Speed makes it run at Speed (units/s), and its length is worked out for you and shown as Derived duration (ms).
From / To	The value the property moves from and to. Value kind chooses how you write it: Value or Colour for a plain number or color, C code for an expression the exported code uses, or Current value for whatever the widget holds when the animation plays.
Easing	The shape of the movement: Linear, Ease In, Ease Out, Ease In Out, Overshoot, Bounce, Step, or one of the 24 CSS curves.

Things to keep in mind:

A track animates one property, so two of its steps must not start at the same moment; the panel warns when they do.
A step with Speed timing needs literal From and To values; Current value and C code only work with Duration, because the length of a speed step comes from the distance between its two bounds.
A colour property takes colour bounds and a numeric property takes numbers; the panel reports a mismatch.
C code bounds, and Current value on the few properties that have no live read, are resolved only by the exported code. Preview names the endpoint it cannot resolve instead of guessing at it.

Playback options

Option	Meaning
Display Name	The name shown in the animation list.
Code name	The name used in the exported code. Letters, digits and `_` only, it cannot start with a digit, and it is at most 16 characters long.
Repeat (-1 = infinite)	How many times the animation plays. `-1` plays forever.
Repeat delay (ms)	The wait between repeats.
Play backwards	Play from the end values back to the start values.
Reverse duration (ms)	How long that backwards movement takes.
Reverse delay (ms)	The wait before the backwards movement begins.
Group delay (ms)	The wait before the whole animation starts.
Apply start value early	Put the start values on the widgets as soon as playback begins, instead of waiting out the delay.

An animation can also run actions when it starts and when it finishes, under Callbacks (On start and On complete). Use them to reveal, hide or change a widget once a transition ends. The editor does not check what those two lists contain, so a problem there surfaces in the Build log rather than in the animation panel.

Playing an animation

Animations are started from a widget's events, in the inspector:

Select the widget, open the Event tab, and add an event such as Short Clicked.
Click Add Action and choose Play Animation.
Pick your animation in the Animation field. The action then plays the whole timeline.

Action	What it does
Play Animation	Starts the animation.
Stop Animation	Ends it. Name an animation to stop only that one; clear the Animation field, which then reads Every animation on the target, to stop everything the widget is running.
Pause Animation	Freezes a running animation where it is.
Resume Animation	Continues a paused animation.
Seek Animation	Jumps an animation that has already been started to a Position (ms) and shows that frame.

Play Animation can also work without an animation asset: choose None (plays one property inline) and set the target, property, start and end values, duration, delay, repeat and easing on the action itself. That is the quickest way to try a movement. Click Promote to animation to turn it into a named animation you can reuse and extend with more tracks.

Changing screens is animated the same way: in the Change Screen action, set Fade to the transition you want and give it a Duration.

Checking motion in preview

In preview the Animation tab adds playback controls for the selected animation:

Play, Pause and Stop, with a status line that reads Idle, Playing, Paused, Stopped or Completed.
Head … ms is how far the current play has reached, and Run … ms / … ms puts the span the preview engine runs the animation over next to the length you authored.
Drag the Playhead across the timeline to hold any single frame; the position settles on the nearest 10 ms.
Zoom out, Zoom in and Fit change how much of the timeline you see.

The panel is read-only while a preview is running, so stop the preview to keep editing.

Version differences

What your exported project can do depends on the project's target LVGL version:

Capability	Availability
Play backwards	Every version.
Repeat the whole animation	LVGL 9.2.2 and later. On LVGL 8.3.7 each track repeats on its own instead.
Group delay (ms)	Every version for an animation of one track and one step; LVGL 9.4.0 and later for a multi-track or multi-step animation.
Reverse duration (ms)	Every version for an animation of one track and one step; only LVGL 8.3.7 for a multi-track or multi-step animation.
Pause Animation / Resume Animation	Every version, except an animation of one track and one step on LVGL 8.3.7 and 9.2.2. On LVGL 8.3.7 a paused animation restarts from the beginning instead of continuing.
Seek Animation, and dragging the playhead	Every version, except an animation of one track and one step, which no version can step through.
Repeat count	At most 65534 on LVGL 8.3.7 and at most 4294967294 on the other versions; a larger count is truncated on the device.
The 24 CSS easing curves	LVGL 9.x only. The seven core curves are available everywhere.
Animatable properties	Nearly every property is available on every version. LVGL 8.3.7 has no margins, no per-axis scale or skew, no draw length, no layered opacity and no gradient opacity, so those need LVGL 9.x.
Transform Zoom	The one property that goes the other way: LVGL 8.3.7 has it and no 9.x version does, because LVGL 9.x splits it into scale and skew.

anyui-LIVE keeps what you have authored when you switch versions and tells you what the current version cannot express: a track on a property the version does not have is marked on the timeline, and both that property and an unsupported easing curve are reported in the Problems tab, so you see them before you export.

Preview runs the same animations as the exported project, apart from the value kinds mentioned under Steps and a few options its browser engine does not run yet - playing backwards, waiting before the whole animation, and pausing an animation of one track and one step. When one of them is in the animation you are checking, the Problems tab names the animation and what preview cannot do, and the exported code still carries it.

Inspector - widget events and actions.
Preview - run the project and check the motion.
Dynamic LVGL version - the target version that decides what is available.
Codegen - how animations reach the exported code.