TweenTime
Demo
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:
- Timeline.js by Marcin Ignac
- Keytime Editor by Matt DesLauriers
- Frame.js by Ricardo Cabello
- 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.