Skip to content

Animations

ssbaxys edited this page Oct 26, 2026 · 1 revision

Property animations, keyframes, timelines, easing curves and springs.

Any style property can be animated. Animations write to a separate layer, so hover and pressed styles keep working underneath, and animations stop by themselves when an element is removed.

box.animate(Styles.TRANSLATE_X).keyframe(0, 0f).keyframe(0.5f, 160f, Easing.OUT_BOUNCE).keyframe(1, 0f)
        .duration(2.4f).loop().play();

element.play(Motion.sequence(
        Motion.call(this::sound),
        Motion.parallel(a.animate(Styles.OPACITY).to(1f).motion(), b.animate(Styles.SCALE).to(1.2f).motion()),
        Motion.delay(0.2f),
        VanillaFx.shake(element, 4f, 0.4f)));

AnimatedFloat x = new AnimatedFloat(root.animator(), 0).spring(Spring.BOUNCY);  // for your own widgets
x.animateTo(100);

23 easing curves (Easing), cubicBezier, steps, springs.

// Any style property, keyframes, loops and yoyo:
box.animate(Styles.TRANSLATE_X).keyframe(0, 0f).keyframe(0.5f, 160f, Easing.OUT_BOUNCE).keyframe(1, 0f)
        .duration(2.4f).loop().play();
box.animate(Styles.BACKGROUND).from(Brush.solid(a)).to(Gradients.NEON).duration(1).yoyo().loops(4).play();

// A timeline made of parts:
element.play(Motion.sequence(
        Motion.call(() -> sound()),
        Motion.parallel(a.animate(Styles.OPACITY).to(1f).motion(), b.animate(Styles.SCALE).to(1.2f).motion()),
        Motion.delay(0.2f),
        VanillaFx.shake(element, 4f, 0.4f)));
  • Playback controls playback: loops, loop(), yoyo, speed, pause/resume, onFinish.
  • Animations write to a separate layer above the style, so hover and pressed keep working underneath. When an element is removed from the tree, its animations stop by themselves.
  • Curves: 23 built-in (Easing.presets()), plus Easing.cubicBezier, steps(n), spring(damping, oscillations), reversed() and mirrored().

← Colors and Gradients · English home · Data and Signals →

Clone this wiki locally