simple javascript timeline library for animation and prototyping
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.
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.
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.
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.
Include the timeliner.js file.
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');
or
To test without compiling, open test_module.html in the browser.
Format code
yarn run fix
Generate Build
yarn run mini
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)