Animation and presence

Animation in Masque is declarative. Rather than writing keyframes, you say which properties spring toward their new value when it changes.

Transitions

Flex {
  key: "save-button",
  initial: { opacity: 0, transform: { translate_y: -12 } },
  exit:    { opacity: 0, transform: { translate_y:  -8 } },
  style: {
    padding: 12,
    background_color: { r: 60, g: 90, b: 120, a: 255 },
    transition: {
      opacity: "spring",
      transform: "spring",
      background_color: { stiffness: 200, damping: 28 },
    },
  },
  hover_style: {
    background_color: { r: 90, g: 120, b: 150, a: 255 },
  },
  children: [ Text { text: "Save" } ],
}

• transition lists the properties that spring. "spring" uses the defaults, or tune each property with stiffness and damping.
• initial is the style a widget is born at. It springs from there to style.
• exit is the style it animates toward when it leaves the tree. It stays as a ghost until its springs settle.
• key is the widget's stable identity. Exit animations need it, so reconciliation can tell removal from reordering.

Animatable properties include colours, borders, corner radius, padding, margin, gap, text size, opacity and transform.

Presence

Wrap a swap point, such as a page transition, in Presence:

Presence {
  key: current_page,
  mode: "wait",
  children: [ render_page(current_page) ],
}

When key changes, the old content exits. In the default "pop" mode, the new content enters at the same time, under the outgoing ghosts. In "wait" mode, it waits until the exit has finished.