Animations Next Steps

🧑‍🏫 Prerequisites

This note assumes you are familiar with previous research on animating RSC charts.

📈 Data Value animations

The developer explored two approaches for data value animations:

Vega Scale Easing

The previous research explored using Vega scales for animation easing. While this approach works for basic easing, it . One other drawback is that adding scales actually takes more code than the more powerful alternative.

Drawbacks of Vega Scale Easing

• doesn't let us use conditionals or complex math for easing functions
• scales are approximating easing functions, and those approximations aren't as smooth visually as the real function TODO add demo
• actually takes more code than the next option

Linear Timer with As-Needed Easing Multiplication

In this approach, the animation timer acts as a linear source of truth for time progression. Then, the timer value is mathematically transformed inside each specific animation mark.

Here is a Vega editor instance with an example of this approach!

The following code is the most important part of the spec:

"signals": [
  {
    "name": "timerValue",
    "value": "0",
    "on": [{"events": "timer{16}", "update": "min(1, timerValue + (1 / 60))"}] // 1 second timer duration (60 fps)
  }
],

"marks": [
  {
    "name": "line",
    "type": "line",
    "from": {"data": "table"},
    "interactive": false,
    "encode": {
      "enter": {
        "stroke": {"value": "rgb(15, 181, 174)"},
        "x": {"scale": "xTime", "field": "datetime0"}
      },
      "update": {
        "y": {"scale": "yLinear", "signal": "datum.value * (1 - pow(1 - timerValue, 3))"} // directly transform timerValue to create easing
      }
    }
  }
],

The (1 - pow(1 - timerValue, 3)) is an implementation of this easing function, which is a simpler approach than using a Vega scale.

This approach also supports inline ternary operators. So, we can easily implement ease-in-out without needing to add multiple scales (the previous appraoch). We also get access to some more fun easing functions...

Overall, this approach is simpler and more powerful than the previous approach.

Drawbacks of Linear Timer with As-Needed Easing Multiplication

• In the Vega specs shown above, the linear timer starts at 0 when the spec loads. So if the spec is ever modified, it will re-animate. Any implementation of spec-based interactivity (like highlighting line points) must intentionally work around resetting the animation timer.

👻 Opacity animations

The developer explored two approaches for opacity animations:

Linear Timer with Vega Scale scaling

weakness: scales aren't as smooth as as-needed easing multiplication

Linear Timer with As-Needed Easing Multiplication

🎛️ Animations from y-axis

TODO