The AnimateItem command can be used to create animations for the opacity and transform properties. With the release of APL 1.6, many more properties have been unlocked for dynamic updates, such as the height and width of a component.However, the AnimateItem command does not support these properties, instead you have to use for example Easing Functions to implement animations for these properties. In my opinion, the Easing Functions are relatively complex in terms of their structure, and furthermore they can currently only be defined statically, which means that, as with the AnimateItem command, I have to define the initial and final state. For static layouts this approach may work, but not for flexible layouts which are generated using the Datasources and Data Array Inflation method.

My wish for a new APL version would be a transition property to define how a property should be animated after it has been updated using the SetValue command.

Example:

"items": [{
  "type": "Frame",
  "backgroundColor": "transparent",
  "transition": [{
    "property": "backgroundColor",
    "duration": 1000,
    "delay": 500
  }, {
    "property": "transform",
    "duration": 1000,
    "delay": 500
  }],
  "transform": [{
    "rotate": 0
  }],
  "onMount": [{
    "type": "SetValue",
    "property": "backgroundColor",
    "value": "blue"
  }, {
    "type": "SetValue",
    "property": "transform",
    "value": [{
      "rotate": 45
    }]
  }],
  "item": {
    "type": "Text",
    "text": "backgroundColor animation"
  }
}]  

Also, it would be nice to have handlers to react to these state changes.

"items": [{
  "type": "Frame",
  "backgroundColor": "transparent",
  "transition": [{
    "property": "backgroundColor",
    "duration": 1000,
    "delay": 500
  }, {
    "property": "transform",
    "duration": 1000,
    "delay": 500
  },, {
    "property": "width",
    "duration": 100
  }],
  "transform": [{
    "rotate": 0
  }],
  "onMount": [{
    "type": "SetValue",
    "property": "backgroundColor",
    "value": "blue"
  }, {
    "type": "SetValue",
    "property": "transform",
    "value": [{
      "rotate": 45
    }]
  }],
  "onTransitionRun": [{
    "when": "${event.target.property == 'transform' && event.target.value >= 30}",
    "type": "SetValue",
    "property": "width",
    "value": "${event.target.component.width + 10}"
  }],
  "onTransitionEnd": [{
    "type": "Idle",
    "delay": 5000
  }, {
    "type": "SetValue",
    "property": "backgroundColor",
    "value": "transparent"
  }, {
    "type": "SetValue",
    "property": "transform",
    "value": [{
      "rotate": 0
    }]
  }],
  "item": {
    "type": "Text",
    "text": "backgroundColor animation"
  }
}]

In my opinion, this construct is much more flexible than the AnimateItem command, and it would also work well with the newly introduced styled properties.