#ijeoma.js

A fufu-powered Javascript library for creating animations which look and feel tasty. Ijeoma (ee-JOH-mah) means bon voyage in Igbo, a language from Nigeria.

The code is based on ijeomamotion for Java/Processing which was ported to JS for processing.js so it could be used in Processing cross-mode (between Java and JS modes with no changes to the code). The Java and JS library have been used in projects like Chromeweblab "Data Tracer", Nike Camp Victory "Nike+ Heat Map", The Office of Creative Research's (OCR) "The room would be good enough for the time she had to stay" and more.

While processing.js and Processing Javascript mode were sleeping and p5.js was born, ijeomamotion was being refactored to ijeoma.js which weights a lot less, has more muscle and is independent from processing.js and p5.js. Although there is an addon for p5.js because we still love Processing.

#Download Developement: ijeoma.js

Production: ijeoma.min.js

#Examples
MOTION: counts from a starting time of 0 to an ending duration.

MOTION.Tween: eases multiple number variables and object properties from a starting value to an ending value within a duration.

MOTION.Parallel: plays multiple tweens at the same time.

MOTION.Sequence: plays tweens one after the other.

MOTION.Timeline: plays Tweens, Parallels and Sequences any time using MOTION.Keyframes.

Mouse

Gradients: shows how to create custom property for tweening colors

Arrays

Path

Lines

Bar Chart

Circular Network

Square: shows how to combine sequences and tweens in a timeline

#Getting Started

###Creating tweens Tweening a variable named x from 0 to 1024 in 1000 millseconds.

//NOTE: vars in brackets are optional
//new MOTION.Tween(object, property, end, duration, [delay], [easing])
var x = 0;
// if no object is passed it will default to window
var t = new MOTION.Tween(window, "x", 1024, 1000).play(); 

or

//NOTE: [start,end] is a required array
//new MOTION.Tween(property, [start,end], duration, [delay], [easing])
// object defaults to window and the variable x is defined in window with 
var t = new MOTION.Tween("x", [0,1024],1000).play(); a starting value of 0

Tweening an array

//NOTE: start and end array must have the same length
var xy = [0,0];
var t = new MOTION.Tween(window, "xy", [100,200], 1000).play(); 

Tweening through an array of points as on a path

//NOTE: array length must be greater than 3
var x = 0;
var t = new MOTION.Tween(window, "x", [0,100,200,300,400], 1000).play(); 

###Tweening using relative and absolute start and end values

//the default which tweens from defined start to end values every play
tween.valueMode(MOTION.ABSOLUTE) 

or

//tweens from defined start to end values on first play and from the property's value to a defined end value every play after
tween.valueMode(MOTION.RELATIVE);

###Tweening multiple variables and object properties

//new MOTION.Tween(duration, [delay], [easing])
var t = new MOTION.Tween(1000).add(window, "x", [0,1024]).add(window, "y", [0,768]).add(window, "size", [0,100]).play();

or

//new MOTION.Tween(duration, [delay], [easing])
// object defaults to window
var t = new MOTION.Tween(1000).add("x", [0,1024]).add("y", [0,768]).add("size", [0,100]).play(); 

You can also call play and stop on all motion objects using

MOTION.playAll()
MOTION.stopAll()

###Delaying

//delay for 500 milliseconds
var t = new MOTION.Tween("w", 1024, 1000, 500).play(); 

or

var t = new MOTION.Tween("w", 1024, 1000).delay(500).play();

###Easing You can add easing to to Tweens using the MOTION.Quad, MOTION.Cubic, MOTION.Quart, MOTION.Quint, MOTION.Sine, MOTION.Expo, MOTION.Circ, MOTION.Elastic, MOTION.Back, MOTION.Bounce classes. Each of them have In, Out, and InOut functions.

var t = new MOTION.Tween("w", 1024, 100, 0, MOTION.Quad.In).play(); 

or

var t = new MOTION.Tween("w", 1024, 100).easing(MOTION.Quad.In).play(); 

###Updating

MOTION.update(time) //best used with requestAnimationFrame

or

MOTION.update() //will use performance.now() or Date.now() if not supported.

###Pausing, Resuming

t.pause(); 
t.resume(); 
t.seek(position); 

MOTION.pauseAll();
MOTION.resumell();
MOTION.seekAll(position);

###Repeating

var t = new MOTION.Tween(...).repeat().play();

MOTION.repeatAll([duration]);

###Reversing

var t = new MOTION.Tween(...).repeat().reverse().play();

MOTION.reverseAll();

###Calling functions on start, update and end events

t = new MOTION.Tween(...).onStart(func).onUpdate(func).onEnd(func).play(); 

###Changing speed/timescale

var t = new MOTION.Tween(...).timeScale(2) //plays back twice as fast

MOTION.timeScaleAll(time);

###Destroying tweens

Motion.remove(motion)

If you're creating and playing a lot of tweens that you're only using once you should can call useOnce() which will automatically destroy them after. It's set to false by default.

new Motion(...).useOnce();
or
//applies call to all tween instances
MOTION.useOnce();

##Playing back tweens in parallel

var parallel = new MOTION.Parallel()
  .add(new MOTION.Tween(...)) 
  .add(new MOTION.Tween(...)) 
  .play(); 

##Playing back tweens in sequence

var sequence = new MOTION.Sequence() 
  .add(new MOTION.Tween(...)) 
  .add(new MOTION.Tween(...))  
  .repeat()
  .play();

##Playing back tweens in a timeline

var timeline = new MOTION.Timeline()
  .add(new MOTION.Tween(...), 1000) //creates a keyframe at 1000 milliseconds and adds that tween object
  .add(new MOTION.Tween(...), 2000)
  .repeat()
  .play();

or

var timeline = new MOTION.Timeline();
var keyframe1 = new MOTION.Keyframe(1000).add(new MOTION.Tween(...))
var keyframe2 = new MOTION.Keyframe(2000).add(new MOTION.Tween(...))
timeline.add(k1).add(k2).play();

##Going to and playing or stopping at a keyframe

timeline.play(time)
timeline.stop(time)