Please excuse the question title but I don't really know how sum the question up.

I'm working on an Electron project where we use Animejs to create an animated presentation. It's mainly just text that is brought onto the screen by fading, translateY, translateX etc. And then after a few seconds the text is animated out and new text is animated in.

The main purpose of the application is that the user can save the presentation as a video. So we are using Electrons on paint event to capture each rendered frame. And this works OK. But I don't think it is the correct way since the browser framerate is not constant and also it only fires the "paint" event when there is movement so we have had to figure out a way to use the last written frame to fill in the gaps where there are missing frames. This also works ok but it is not perfect and a little buggy.

I think the optimal solution would be to have an array of objects that contains the predetermined coordinates of each element for each frame. Then I can loop through the array/frames and use js to position each element correctly and then write that frame to disk as a bitmap. So no more missing frames.

As an example, animating two lines of text from left to right might look something like this (only two frames for brevity):

 const frames = [
{
  coordinates: [
    {
      elId: "text-1",
      left: 50, // px
      top: 150, // px
    },
    {
      elId: "text-2",
      left: 50, // px
      top: 180, // px
    },
  ],
},
{
  coordinates: [
    {
      elId: "text-1",
      left: 51, // px
      top: 150, // px
    },
    {
      elId: "text-2",
      left: 51, // px
      top: 180, // px
    },
  ],
},

];

So my question is, does anyone know of an animation library that will allow us to write the animations in js like Animejs or Greensock does but instead of running the animations in real time the library spits out an array of objects similar to the above example?