npm install timeline
Timeline = require 'timeline'
To create a timeline using the default options:
timeline = new Timeline
You can also pass in options:
timeline = new Timeline length: 5000 frequency: 250
The defaults are:
length: 0 frequency: 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:
- The time in milliseconds on the timeline where the marker should live.
- The function to execute when moving forward in time through the marker.
- The function to execute when moving backward in time through the marker.
timeline.markers.push time: 500 forward: -> $('.elements').show() backward: -> $('.elements').hide()
All getters return the expected value. Every other method returns the Timeline object for chaining.
- Begins playing the timeline, triggering markers as it goes.
- Stops playing the timeline.
- Returns the length of the timeline.
- Sets the length of the timeline to
- Returns the frequency.
- Sets the frequency to
- Returns the current position of the timeline.
- Jumps to the new position at
Timelines also have three methods for events:
- on(event, callback)
- Binds the
callbackfunction 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:
- Triggered whenever a timeline starts playing.
- Triggered whenever a timeline pauses.
- Triggered if the timeline hits the end.
- Triggered every
frequencymilliseconds while a timeline is playing, and once every time
position(ms)is used, regardless of whether the timeline is playing or not.
timeline = new Timeline length:4000 timeline.on 'tick', -> $('.current-time').text timeline.position()
- True if the timeline is playing, false otherwise.
Development + Tests
- Clone the repository