Animations

Declare animations for properties with the animate keyword like this:

export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;

    background: area.pressed ? blue : red;
    animate background {
        duration: 250ms;
    }

    area := TouchArea {}
}

slint

This will animate the color property for 250ms whenever it changes.

It’s also possible to animate several properties with the same animation, so:

animate x, y { duration: 100ms; easing: ease-out-bounce; }

slint

is the same as:

animate x { duration: 100ms; easing: ease-out-bounce; }
animate y { duration: 100ms; easing: ease-out-bounce; }

slint

Fine-tune animations using the following parameters:

delay

duration default: 0ms

The amount of time to wait before starting the animation.

duration

duration default: 0ms

The amount of time it takes for the animation to complete.

iteration-count

float default: 0.0

The number of times an animation should run. A negative value specifies infinite reruns. Fractional values are possible. For permanently running animations, see `animation-tick()`.

easing

easing default: linear

Can be any of the following. See easings.net ↗ for a visual reference:

direction

enum AnimationDirection default: the first enum value

AnimationDirection

This enum describes the direction of an animation.

• normal: The “normal” direction as defined in CSS ↗.
• reverse: The “reverse” direction as defined in CSS ↗.
• alternate: The “alternate” direction as defined in CSS ↗.
• alternate-reverse: The “alternate reverse” direction as defined in CSS ↗.

Use this to set or change the direction of the animation.