Introduce smoothstep interpolation function to chain animations with different interpolation functions smoothly

[HikariIsChillin]

Description:
I recently came across a technique to interpolate between two functions smoothly with smooth transition functions, and I believe integrating this technique into Motion Canvas could significantly enhance its functionality. This feature would enable users to seamlessly transition between different interpolation functions, providing greater flexibility and control over some animations.

Proposed Solution:
Introduce a new interpolation function, smoothstep, that takes in two interpolation functions, and smoothly transitions between them through the animation. The proposed API syntax could resemble the following:

yield* ref().x(100, 1, smoothstep(easeInCubic, linear))
yield loop(ref().x(ref().x() + 100, 1, linear))

yield* ref().x(100, 1, smoothstep(easeInCubic, easeOutElastic))

This would allow for animating into a linear loop or transitioning between different easing functions, as demonstrated in the examples provided.

Additionally, the interpolation function could accept additional parameters for finer control over the animation sequence. For example:

• A boolean parameter to offset the second function to the right, so instead of starting as the first and ending as the second, it will adjust the ending of the first to fit in the next animation. Allowing to chain multiple easings.

  yield* ref().x(
      100,
      1,
      smoothstep(
          easeInCubic,
          easeOutElastic, // the easing for the next chained animation
          true // offsets the easeOut to the right
      )
  ).to(
      200,
      1,
      easeOutElastic // the smoothstep will end with the same speed this easing begins with
  )

• A ratio parameter (duration of next chained animation divided by duration of the current one), ensuring smooth interpolation between animations with different durations.

  yield* ref().x(100, 1, smoothstep(easeInCubic, easeOutElastic, true, 2)).to(200, 2, easeOutElastic)

  I don't think this API for chaining animations with different durations is the best though, but I'm not sure what the best way of doing this would be, so I'd like suggestions for this part. Perhaps something like:

  smoothstepAll({ easing: easeIn, duration: 1}, { easing: linear, duration: 5}, { easing: easeOut, duration: 1})