Generic event timeline for node or the browser
npm install timeline
Timeline = require 'timeline'
To create a timeline using the default options:
You can also pass in options:
timeline =length: 5000frequency: 250
The defaults are:
length: 0frequency: 100
length is the total length of the timeline.
frequency is how often
tick events are fired when the timeline is playing. All values are in milliseconds.
A Timeline object contains an Array of markers. Markers are objects with three properties:time The time in milliseconds on the timeline where the marker should live. forward The function to execute when moving forward in time through the marker. backward The function to execute when moving backward in time through the marker.
timelinemarkerspushtime: 500: ->$'.elements'show: ->$'.elements'hide
All getters return the expected value. Every other method returns the Timeline object for chaining.play() Begins playing the timeline, triggering markers as it goes. pause() Stops playing the timeline. length() Returns the length of the timeline. length(ms) Sets the length of the timeline to `ms`. frequency() Returns the frequency. frequency(ms) Sets the frequency to `ms`. position() Returns the current position of the timeline. position(ms) Jumps to the new position at `ms`.
Timelines also have three methods for events:on(event, callback) Binds the `callback` function to the event. off(event[, callback]) Unbinds event callbacks. If a callback is passed in as the second argument, only that callback is unbound. If there is no second argument, all callbacks for that event are unbound. trigger(event, args...) Triggers all callbacks bound to the event. Any extra parameters are passed as parameters to the callbacks.
Timelines emit these events:play Triggered whenever a timeline starts playing. pause Triggered whenever a timeline pauses. end Triggered if the timeline hits the end. tick Triggered every `frequency` milliseconds while a timeline is playing, and once every time `position(ms)` is used, regardless of whether the timeline is playing or not.
timeline = length:4000timelineon 'tick'->$'.current-time'text timelineposition
- Clone the repository