Skip to content

Animations

Use animations to draw attention to a state change, highlight an active device, or change a tool's appearance.

Animate a matching state

Give the target tool an animation_id:

1
2
3
4
5
6
7
layout:
  circles:
    - animation_id: 10
      entity_index: 0
      xpos: 50
      ypos: 50
      radius: 30

Then describe what happens for a state:

1
2
3
4
5
6
7
8
9
animations:
  entity.0:
    - state: "on"
      circles:
        - animation_id: 10
          styles:
            - fill: var(--primary-color)
            - animation: pulse 1s ease-in-out both
            - transform-origin: center

entity.0 watches the first card entity. The matching animation_id identifies the tool that changes.

Included animation names

Common choices include:

  • pulse
  • flash
  • heartBeat
  • jello
  • shake
  • swing
  • zoomIn
  • zoomOut

Use them through the CSS animation property.

Use a dynamic style

For a numeric threshold or a condition involving several entities, put the condition directly in the style:

1
2
3
4
5
6
7
styles:
  animation: |
    [[[
      return Number(state) > 30
        ? 'flash 1s ease-in-out 3'
        : 'none';
    ]]]

See JavaScript templates for the available values and more examples.