Skip to content

idflood/TweenTime

Repository files navigation

TweenTime

experimental

screenshot

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.