Make certain options animatable

[Escapado]

Feature Proposal

It would be nice if the user could animate options such as axis tick paddings, label colors or sizes.

Feature Use Case

I am trying to animate the color/opacity and padding for the labels of a line chart Preferably I'd like to have the option to stagger the animation for each label
There are now multiple ways this could be implemented. The following gif shows what I mean by "staggered" and animating labels, although it's based on a different chart type. The labels on the bars and the ticks, are translated and their opacity is animated.

Possible Implementation

First I thought this could be implemented by allowing a call to the update function in the onProgress hook but it turns out this massively slows down rendering and also doesn't work properly and maybe the API would look messy then. So another option would be to extend the animation object to accept options that should be animated with their own duration, easing and delay. For options concerning iterable items such as labels there could be a stagger parameter or a delay array instead of a value where the entries could represent the delay of each respective item.

It could look like this

animation: {
  easing: 'easeInOutExpo',
  duration: 2000,
  //The following extends the regular animation object
  animateOptions: [{
    animationTarget: scales.yAxes[0].ticks.padding,
    value: [0, 10], // [start, stop]
    easing: 'easeInSine',
    delay: 50, // Delay in ms before animation starts
    staggered: true, // Whether animation should be staggered for the labels
    staggerDelay: 75 // Stagger delay in ms for each element
  },
  {
    animationTarget: scales.yAxes[0].ticks.fontColor,
    value: ['rgba(242, 141, 114, 0)', 'rgba(242, 141, 114, 1)'], // Anime.js can do that
    easing: 'easeOutQuad',
    delay: 50,
    staggered: true,
    staggerDelay: 75
  }]
},

[kurkle]

Implemented in #6845