Property animation timeline with keyframe tweening and easing

[brylie]

Related to #82

As a data storyteller I would like the camera to move around smoothly and automatically over time So I can focus on the narrative I am trying to convey

Feature

Add a 'camera automation timeline' interface to enable sequenced camera movements. The movements might be encoded in keyframes that contain the camera location and rotation (abstracted from the internal viewport data representation). Camera position would be animated by 'tweening' the values between keyframes. Non-linear tweens, or easings, would give a natural feeling to camera motion.

[brylie]

On further reflection, this 'tweened keyframe animation timeline' might also be used to animate other viewspace properties. For example, it might be meaningful to animate the time filter window start/end points. The combination of camera movement and time filter animation could be very useful for highlighting data nuances and trends.

[brylie]

A hypothetical workflow would be to allow the user to directly manipulate the camera and time filter window and then insert a keyframe somewhere along the automation timeline by selecting the point in time and clickung a keyframe button and the properties for which they want to capture values. Rinse and repeat 🌻

[brylie]

There are two main 'storytelling modes', which are somewhat complementary.

1) time-sequenced - a timeline with keyframes that are controlled via a playback head (similar to the current time filter) 2) scene-based - I.e. a slideshow presentation where each scene would be a snapshot of desired parameter state and navigation jumps from scene to scene

They seem interrelated as, for example, a scene-based presentation may have scenes with sub-timeline events (such as a slide deck with animations on some slides).

In conjunction with camera placement and time control, the visibility and opacity of layers could be toggled/tweened as part of the narration.

[brylie]

Godot Engine serves as a good example of a keyframe animation UX.

Here is the Godot keyframe timeline:

Any property that can be keyframed has a corresponding key icon that the user can click to 'record' the property at that value in time:

[heshan0131]

Hi @brylie This is awesome, thanks for suggesting this feature. The UI is very helpful. The uber Elevate team, in fact, have built a customized tool adding keyframe animation features with kepler.gl programmatically. Your UI suggestion is exactly what we need to make this animation feature purely in the UI without having to write any code. We will take your suggestion and see how can we put it into our roadmap. Thanks again!

[chrisgervang]

@brylie Just wanted to chime in! I'm the engineer who built the keyframe animation features used in the video @heshan0131 linked to. I'm continuing to make progress on the library and UI components. Thank you for your suggestions. I've kept them in mind!

For this first version, we'll release before we have video export.. but I've also been researching methods to do this. The plan is you'll be able to create multiple shots in a new animation panel, and play them back. Recording can be done with quicktime / screen capture for now.

As for easing I'm planning on: Linear, Ease In, Ease Out, Ease In Out, and Hold.

[brylie]

@chrisgervang sounds cool. I agree that video export may not be as high priority, since there are ready made screen capture tools. It may arise later that rendering the frames makes screen captured video somewhat jerky, in which case a baked in renderer may make sense.