Timeliner

Timeliner is a graphical graphical tool to help create and prototype animations quickly. It is useful for adjusting variables and checking out how the effects changes over time with keyframing and easing/tweening functions. It may also have some similarities with the timeline component of adobe flash, after effects, edge animate or other animation software.

It is written in javascript and meant to work with different javascript libraries or webgl frameworks, in 1d, 2d, or 3d. It is built primary for myself, but feel free to send me suggestions or requests.

Follow me on twitter for updates.

Demo

Example

Video

screenshot

Another js timeline library?

Below are some existing javascript timeline libraries which I think are pretty good. I decided to write mine partly to scratch my itch and partly to challenge myself technically. There are challenges in writing one, but its nice to be in control of your own tools.

Timeline.js by Marcin Ignac
Keytime Editor by Matt DesLauriers
Frame.js by Ricardo Cabello (Side note: mrdoob's talk on this also showcase interesting editors used by the demoscene)
TweenTime by idflood.

I think the current version is much a work in progress. However Ben Schwarz says that a cat dies everytime code doesn't get publish during cssconf asia 2014, so I thought it would be a good idea to release this early.

Philosophy

I wrote Timeliner to be as lightweight and embedable as possible. Styles, HTML, icons are all embeded in a single javascript file. This means it could work as an included script, bookmarklet, or part of a bigger project. I intent to have interoperablility with other controls tools like dat.gui or gui.js.

Usage

Include the timeliner.js file.

<script src="https://github.com/zz85/timeliner/raw/master/timeliner.js"></script>

or import via ES modules

import { Timeliner } from './build/timeliner.min.js'

Load data by code, file upload or loading from saved localStorage.

// target is a "pojo" which gets updated when values change.
var target = {
    name1: 1,
    name2: 2,
    name3: 3
};

// initialize timeliner
var timeliner = new Timeliner(target);
timeliner.addLayer('name1');
timeliner.addLayer('name2');
timeliner.addLayer('name3');

Add a keyframe

double click on the timeline

Select a time on the timeline
Click on the keyframe

Add a tween

Select time between 2 keyframes
Select easing type from the dropdown

Development

To test without compiling, open test_module.html in the browser.

Format code

yarn run fix

Generate Build

yarn run mini

Releases

2.0.0

Refactored using ES modules

1.5.0

Fix package.json dependencies
Easy way to move keyframes (reimplemented block dragging)
Time scale and styling improvements thanks @tschw

1.4.0

Bug fix (insert keyframes should interpolate)
ghosting / onioning skinning tweened values
Icon and layout tweaks
Basic time & vertical scrolling
Simple Ghosting / Onion Skinning Support Example

1.3.0

autosave
load (localstorage, new, autosave, filesystem)
save (export, localstorage, download)
ui tweaks

1.2.0

icons using extracted fontawesome data
slightly npm-ify
window management
basic keyboard shortcuts
basic hdpi
basic touch support

1.1.0

undo / redo (basic)

1.0.0

slider time scale (basic)
fix positioning mouse events
basic play toggled with pause button
basic hook playback to target object
basic playback and pause
semi-allow layer panel to repaint on data change
show current easing of layers
update tween props on insert
show tween values on cursor movement
edit tween (basic)
insert tween (basic)
drag keyframe
insert keyframe on value adjust
adjust value
remove keyframe
insert keyframe
adjust values (basic)

TODO

slider units
usability improvements
better marking time when scaling time
better keyboard shortcuts
move tween blocks
custom context / popup menu
attempt virtual-dom / v.rendering
consider immutable js or localstorage for undo stack
curve editor
graph editor
support audio
support guestures
remote control
a whole ton more

zz85 / timeliner

readme