idflood / tweentime

Another javascript timeline

TweenTime

Demo

Basic example

Grouping

Advanced

Usage

• Use shift key while dragging keys to snap them to existing one or to current time cursor.
• Use alt key while dragging keys to scale them.
• Click on a item label in the timeline to open the editor on the right. From there you can set values and add keys.
• Double click on a property timeline to add a key.

The API is relatively minimal and clearly not definitive now so there is no real documentation yet. But if you are curious check the code of the 2 exemples above.

Another javascript timeline?

At first I created this for an internal project. But to be honest it is also to learn a bit more about d3js, play with some ideas and see where it goes. Hopefully this may be useful for someone else.

Some timeline libraries already exist and they may be a more appropriate choice for production use:

1. Timeline.js by Marcin Ignac
2. Keytime Editor by Matt DesLauriers
3. Frame.js by Ricardo Cabello
4. timeliner by Joshua Koo

So what are the differences?

• Heavy use of d3.js to display the timeline.
• Use TimelineMax to update the values.
• Not meant to be lightweight, this explains the dependencies.
• Written in es6 and transpiled to es5 with 6to5.

License

MIT, see LICENSE.md for details.

tweentime's Issues

display the key time in editor and sort keys in editor by time

Add an option to Editor to set the totalDuration at creation time

when item is closed keys should not be selectable

simplify snapping, only check if target is not selected

style a default .content-wrapper to take 100% width/height

close properties by default

fix properties closing

Color property

localstorage autosave

Missing package

Trying to use this with webpack but getting:

Module not found: Error: Cannot resolve module 'js-signals'

Should be added to package.json, and I guess it is just 'signals' nowadays.

Better method for custom select styling

Use https://github.com/filamentgroup/select-css

should not be able to init drag selection on labels

Property unit handling

Possibility to define a temporary time range and implement looping

Useful when working on some small section of a longer animation.

Add public methods in TweenTime to work with items, properties, keys and values

some missing methods:

• getKey
• setValue (time default to current, optional object parameter if property is given as object)

automatically open properties when selecting a key

snap keys to pixels

implement onDurationChanged

Error when snapping a key to another one on same property

bug when removing a key

Keep showing properties with no key frames

I would like to keep showing properties with no key frames, so the user can add key frames to the property which does not have key frames at the beginning. This change is already in my branch, but I opened this issue to hear the opinion, because this change would affect the existing project using this library.

thorikawa@baea2b2

@idflood Any opinion?

add sortkeys method to Utils

update key time in properties editor when moving key

Add label mask for key--preview

key preview bug when moving a key

possibility to change the key time in editor by clicking on the time

Can't get examples to run.

Hey, I'm having some troubles trying to get this demo to run.
I installed nodejs, bower and gulp, ran npm install, bower install and then gulp
but it won't work: says it is missing FileSaver.js, which - for some reasen - won't install in bower_components.

But even after putting FileSaver.js in the specified place, it still complains about missing the saveAs function.

I'm not sure, what to do next, did I forget something?
I am mainly interested in the d3 timeline and the curve editor, those would be great in a tool I'm developing

when selecting multiple keys, can scale in each directions (and drag)

use alt key + click on a key to scale

Use _ prefix for all private data properties, simplifies export by filtering only _ prefix

Min/Max parameters in properties

add undo and redo capabilities

keys position not updated when resizing window

Jerky visuals in Edge compared to Chrome

I wondered if you had a handle on why there are some major usability issues with Edge when compared to Chrome. This can be seen when you drag to select a group of keys or drag the visible domain at the time scale at the top. After investigating you can see the translate values being updated in inspected html elements however the visuals do not change.

Properties grouping

maybe add a property.group to keep the same data structure

pass editor instance as 2nd parameter of onMenuCreated callback

Possibility to have undefined properties by default

Stop timer when reaching total duration

time indicator masking issue

Removing all keys of a property doesn't delete the property label in the timeline

automatically move time domain when playing

show key informations when item is closes but make them not editable

Replace space with dash in properties group class

key preview should not be visible when adding a new key

Remove key edit from editor when removing a key