Storyline.js is a library to help define a storyboard using natural language.

This is the refined and polished version of the sytem created for BEYOND and cru·ci·form.

Check out the example to see it in action: Storyline.js with CSS 2D transforms.

IMAGE ALT TEXT HERE

There's two parts: Storyline.js is the parser and player, and then a storyboard source object that defines the story. A storyline source has this format:

{
 "value1": [
 "0 cut to 10",
 "2 linear to 3"
 ],
 
 "value2": [
 "0 cut to 0",
 "4 ease to 1",
 "6 ease to 0"
 ]
}

This source object is a map of keys (each key is a value that you will be using in your code x, angle, power, etc.), and each key contains an array of entries. Each entry defines a point in time, and a storyline action, and has the following syntax:

{time in seconds} {action to perform} {value of action}

The actions are:

• cut to instanteously changes to {value}
• linear to will linearly interpolate from the last defined value to {value}
• ease to will ease in-out from the last defined value to {value}

Include Storyline.js

<script src="Storyline.js"></script>

Create a storyline from a structured storyboard source. By calling storyline.get you can get the updated value:

var storyline = STORYLINE.parseStoryline( {
 "value1": [
 "0 cut to 0",
 "5 ease to 1",
 "10 ease to 0"
 ]
 
} );
function update() {
 
 requestAnimationFrame( update );
 console.log( storyline.get( 'value1', ( Date.now() / 1000 ) % 10 ) );
 
}
update();

Simply export the storyline into its own file, and include it like a normal script.

var storyline = STORYLINE.parseStoryline( {
 "value1": [
 "0 cut to 0",
 "5 ease to 1",
 "10 ease to 0"
 ]
 
} );

Or load the content with AJAX and parse it when it's loaded:

var oReq = new XMLHttpRequest();
oReq.onload = function() {
	storyline = STORYLINE.parseStoryline( this.responseText );
	/* ready to use */
};
oReq.open( 'get', 'storyboard.json', true);
oReq.send();

This is the first release. Next steps are to add syntax to control the easing functions, probably something like:

{time} ease to {value} { [ set of easing control points] }

Also, support specific functions to simplify animations:

{time} {wiggle|shake} {extent}

As always: forks, pull requests and code critiques are welcome!

MIT licensed

Copyright (C) 2015 Jaume Sanchez Elias, http://www.clicktorelease.com