[Feature] pre-generate keyframes for onion skinning

[souporserious]

Is your feature request related to a problem? Please describe. Not sure if this is currently supported, but it'd be nice to be able to somehow generate every state when changing params around to better see how they will behave without needing to run the animation. This could potentially be beneficial for snapshot testing or even creating videos like remotion since every frame can be generated. Ideally, we could eventually visualize slices of animation properties and how they will perform.

Describe the solution you'd like I think something similar to the animate function, but it produces keyframes:

const animation = keyframes(
  { scale: 0.96, opacity: 0 },
  { scale: 1, opacity: 1 },
  { easing: spring() }
);

// [{ scale: 0.9689, opacity: 0 }, { scale: 0.9713, opacity: 0.1231 }, { scale: 0.9798, opacity: 0.2712 }, ...]

I think these should be general numbers if possible so they are flexible for different use cases.

Describe alternatives you've considered I was looking into these other libraries, but would like to stay in one library for everything if possible 😊

https://github.com/codepunkt/css-spring https://github.com/ymzuiku/vanilla-spring https://github.com/hemlok/spring-keyframes

[mattgperry]

This is a good idea, @motionone/generators can be used to pregenerate numerical springs and glide but I can imagine doing something with tween as well. There's a limitation currently that it would probably have to be numbers only, because our interpolation of more complex values would be different to that of the browsers.

[mattgperry]

Acknowledging I probably won't get round to a generator for normal keyframes