https://github.com/acmertz/intermezzo.js

A virtual timeline written in JavaScript
https://github.com/acmertz/intermezzo.js

es2015 javascript playback timeline webpack workers

Last synced: about 1 month ago
JSON representation

A virtual timeline written in JavaScript

Host: GitHub
URL: https://github.com/acmertz/intermezzo.js
Owner: acmertz
License: mit
Created: 2016-12-20T23:33:59.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2022-12-29T20:07:49.000Z (over 3 years ago)
Last Synced: 2025-05-29T09:54:30.589Z (about 1 year ago)
Topics: es2015, javascript, playback, timeline, webpack, workers
Language: JavaScript
Size: 1.46 MB
Stars: 2
Watchers: 1
Forks: 1
Open Issues: 23
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# intermezzo.js

## Goals
- Schedule events on a virtual timeline
- Play, pause, and seek the timeline
- Minimal performance impact to UI thread
- Works in browsers that support [`performance.now()`](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now) (IE10+ and modern Chrome, FF, Edge, and Safari)

## What it does
- Schedule callbacks when events on the timeline begin and end
- Compute timing in a Worker to minimize the amount of work that is done on the UI thread
- Correct for `setTimeout` drift during playback

## What it doesn't do
- Animation and tweening
- Update the UI (you should use [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to repeatedly check the playback state if you want to perform your own actions during playback)
- Render to a Canvas

## Why intermezzo.js?
intermezzo.js provides a simple way for you to create a timeline of arbitrary "events" and perform actions when those events begin or end. It makes no assumptions about the purpose of those events (you have to specify your own callbacks).

## Usage and examples
### Create a new instance of Intermezzo:
You may create multiple instances of Intermezzo within the same page. Instances operate independently of each other, and each instance creates its own Worker thread.

var intermezzo = new Intermezzo()

### Add an event to the timeline:
Add an event to the timeline with the specified `time` and `duration`. If included, function `callback` is called when the event begins or ends during timeline playback. The event's unique ID (within this particular instance of Intermezzo) is returned.

var eventId = intermezzo.addEvent(time, duration, callback)

### Remove an event from the timeline:
Remove an existing event from the timeline by passing the ID returned from `addEvent`.

intermezzo.removeEvent(eventId)

### Begin playback:
Start playing back the timeline. Playback can only begin if the duration is greater than 0ms (calling `play` on an instance of Intermezzo with no events will have no effect).

intermezzo.play()

### Pause playback:
Pause the playback. Has no effect if playback is already paused.

intermezzo.pause()

### Seek to a time in milliseconds:
Seek the timeline to a specific time in milliseconds. Has no effect if playback is in progress (you must pause playback before seeking).

intermezzo.seek(time)

### Register a callback:
Fire a callback when one of the following things occurs (use one of these for the value of `type`):

- `begin`: a timeline event has begun
- `end`: a timeline event has ended
- `play`: playback began
- `pause`: playback paused
- `stop`: playback stopped at the end of the timeline
- `seek`: finished seeking to a new time

The registered callback will fire whenever an event of that type occurs.

intermezzo.registerCallback(type, callback)

### Unregister a previously-added callback:
intermezzo.unregisterCallback(type, callback)