I wanted to write a blog post about UI animation types in QML for a while, and as I prepared to do that, I noticed that my last (and first) post about atomic design systems was a big hit. Here’s the first comment.
Only because you can produce these walls of AI generated marketing material doesn't mean you should. This is getting ridiculous.
Nice. So, to sound more human than a human can be, I’ll be a little more unhinged while writing about animated UIs. Little proof-reading, minimal formatting, and I might even use some profanity. Let’s see if marketing approves that.
Animations are not rooted in the design of user interfaces, yet they have played a crucial role in human-machine interactions for years already. The Interaction Design Foundation says that “they contribute significantly to the functionality of appeal of user interfaces”, and that “designers use animations to highlight changes, guide tasks, provide feedback, and add a layer of polish to a design”.
Even when considering designing for embedded devices, such as a car infotainment system or a display that controls a washing machine, UI animations go beyond the visual appeal.
And as technology advances and hardware (both MPUs and MCUs) gets more performant, motion design becomes increasingly easier to implement. Digital touch-screens now often transition with slides, progress bars might show movements inside of the filled-in area, animations might accompany a loading screen. Animating the UI on an embedded device is now a way to signal something relevant to the user while keeping them engaged in an interaction that increasingly resembles the one they have with their smartphones.
I have been thinking about animations in two broad categories: motion graphics and interactions. You can see them both in action in our car HVAC system demo here.
I am not saying this is the only way to categorize them; there are plenty of other ways to do that. You could look at their function (e.g., loading, progression, transition animations), or their format (Lottie, SVG, .mov), but I’d rather focus on the style of interaction.
Motion graphics are animations that play on their own, no user trigger required. This could be a loading spinner, a pulsing indicator, an ambient movement in the background, or even blades of grass swaying in the wind in a video game. Yeah, that last one was pretty specific. These types of animations are often looped or driven by timers and can sometimes be called non-real-time animations.
Interactions are animations triggered by user events. This could be a button press, a hover, a menu sliding, cards flipping over, or toggle switches snapping on and off. These animations provide feedback on the user input and make UIs feel more responsive. They are also called real-time animations.
Interactions are triggered by user events, as in the example of the button with a hover state that appears when a user places her cursor over the button (source: NNG Group)
If you’re new here, QML is Qt’s declarative language for building user interfaces, and animation is a fundamental part of QML and the UIs you can create with it.
In QML, animations are applied to property changes. An animation defines the interpolation curve from one value to another when a property value changes. These animation curves create smooth transitions from one value to another.
An animation is defined by a series of target properties to be animated, an easing curve for the interpolation curve, and a duration. All animations in Qt Quick are controlled by the same timer and are therefore synchronized. This improves the performance and visual quality of animations.
There are plenty of UI animations in QML, and you can find them all described in our documentation. For the purpose of this article, I want to give an overview of the most common ones.
The base class for all animations in QML is Animation. Everything below inherits from it, which means all the common properties of Animation (running, loops, paused, etc) are available on every animation type.
I’ve organized the animation types in QML by what they do rather than their inheritance tree.
Property animations interpolate a property from one value to another over a duration.
PropertyAnimation - This is the general-purpose one. Animates any property that holds a numeric, color, vector, or other interpolatable value. You specify from, to, duration, and optionally easing.type.
NumberAnimation - A convenient subtype of PropertyAnimation. Functionally identical to PropertyAnimation but explicitly for numbers.
ColorAnimation - It interpolates between colors.
RotationAnimation - This is a rotation with control over direction (clockwise, counterclockwise, shortest path).
Vector3dAnimation - This defines an animation to be applied when a Vector3d value changes, and it can be applied in a number of ways (transitions, behaviors, property value sources).
SmoothedAnimation - It animates a property toward a target value. Instead of specifying duration, you specify velocity. Great for tracking a moving target smoothly (like a cursor).
SpringAnimation - This is a physics-based spring animation. You configure spring, damping, and mass, and the animation oscillates and settles like a real spring. Excellent for natural-feeling interactions like pull-to-refresh.
Group animations handle multiple animations.
ParallelAnimation - It runs multiple animations at the same time (fade in while sliding up).
SequentialAnimation - This runs animations one after another. Use for multi-step (slide in, then fade up).
PauseAnimation - This animation inserts a delay inside a sequentialAnimation. Just a duration - no property changes.
Structural animations depict changes in an object's structure.
AnchorAnimation - This allows animation changes to anchor-based layouts. When you change which anchors an item uses (anchored left to right) this interpolates the position change.
ParentAnimation - It animates reparenting. When an item’s parent changes, this ensures the visual position changes smoothly.
PathAnimation - An animation that moves an item along a path.
ScriptAction - It runs a Javascript snippet. Useful for triggering effects during an animation.
PropertyAction - It instantly sets a property value at a specific point in an animation. Useful inside SequentialAnimation when you need to snap a property to a value between animated steps.
This is a special type. Unlike standard animation types that run on the GUI thread, this runs on the render thread. This means it can stay smooth even when the GUI is busy. The trade-off is that it is limited to a few properties (x, y, opacity, rotation, scale).
Behavior isn’t exactly an animation type, but it’s a way to attach animations directly to a property so it runs automatically whenever that property changes.
Rectangle{
width: 100
Behavior on width {
NumberAnimation { duration: 1000}
}
}This inline NumberAnimation runs whenever the width value changes.
Transitions and timelines are not competing tools; they solve different problems, and most real-world QML projects end up using both.
Transitions are state-driven. They are tightly integrated with the State system. They fire automatically when states change, for example, when the user clicks a button or completes a given action. You define states, and a transition describes how to animate between them.
Transitions should be your default when you are dealing with state-driven UI animations.
In the screenshot, see how transitions are used in Qt Design Studio to create UI animations.
Timeline is a keyframe-based animation system that gives you precise control over property values at specific points in time or at particular frames. This is ideal for complex animations, and you can drive the currentFrame property by anything, like a slider. Timeline is a great way to create interactive animations in Qt Design Studio visual editor. As it is not integrated with the State/Transition system, you have to wire up state-driven behavior manually with Timelines.
While it can be an overkill for simple property animations, timelines are best for complex, multi-property animations, and you should use Timeline when you need key framing or want animations driven by something other than states.
A screenshot showing how animations are used in Qt Design Studio to create UI animations.
UI animations are not an afterthought; they are a core part of what makes an interface feel alive. Whether you’re building a modern home appliance display or a safety-critical user interface for a medical device, the distinction between motion graphics and interactions should guide most of your decisions. If something plays on its own to communicate progress or keep the user engaged, motion graphics and Timeline are the way to go. On the other hand, if something responds to a user action, lean into interactions and transitions.
You can, of course, mix the two when it makes sense, because real UIs (and real use cases) rarely fit a single pattern. The goal should always be the same: make the user interface feel like it’s responding to the person using it, not just a showcase of infinite possibilities.