search

visgl / hubble.gl

A client-side JavaScript library for animating data visualizations and rendering videos.
https://hubble.gl
MIT License
143 stars 29 forks source link

Time scrubber for kepler component #262

Open chrisgervang opened 1 year ago

chrisgervang commented 1 year ago

Currently it's difficult and time consuming to preview the ending of an animation because it needs to played back in full.

A simple time scrubber in the kepler video export component would solve this issue, and allow users to see any moment in the animation before rendering.

akre54 commented 1 year ago

Yes very into this idea. Current view state should be a pure function of time and properties - we should be able to compute the values at a given timestamp easily without needing to compute everything that came before it.

Let's make this a higher priority.

chrisgervang commented 1 year ago

It's really easy to implement too since hubble already ships a "seek" function. This is just a UI change where the main thing to figure out is which design to go with. I had one drafted - I'll export some screens and states today for feedback.

chrisgervang commented 1 year ago

What do you think of this design?

Time Scrubber Proposal

akre54 commented 1 year ago

I think I'd prefer a more keyframe-centric design but this is great as a starting point! Really good place to jump off from.

chrisgervang commented 1 year ago

Have any examples? I think I agree, but keyframe-centric design can mean so many things. I have another design approach I'll share for a one-track keyframe editor, which could be used in applications that only need one track, like a "magic keyframe" timeline discussed in https://github.com/visgl/hubble.gl/pull/43

I think the basic time scrubber can get built within a couple days because it's so simple, whereas designing keyframe-centric sounds like a bigger effort.

akre54 commented 1 year ago

See the prior art section of https://observablehq.com/@akre54/animator-lib-proposal

I'm thinking more specifically like Theater.js: https://www.theatrejs.com/docs/latest/manual/sequences

Don't disagree this is a necessary first step.