//see also - https://createjs.com/tweenjs maybe? 

​

/*

This demo shows a very few things Green Sock Animation Platform (GSAP, or just GS) can do.

I like it because 

 - it's fast, 

 - it has lots of features, but is consistent, so learnable

 - has both animation/tween stuff and a really good timeline

GSAP implements the canonical Penner animation easings and tweens. 

See early writing on this here:

http://robertpenner.com/easing/penner_chapter7_tweening.pdf

Penner's in Brooklyn!

https://www.linkedin.com/in/robertpenner/

​

But tweens by themselves are only so useful (like human tweens I guess). 

Generally we want to compose animation over time - 

with a flurry of activity here, a lull here etc

So a good timeline implementation is essential - 

we want something where we can flexibly schedule and rearrange events.

​

*/

​

var x=20, y=20, opacity=0.5; //GS can manipulate variables (in "this" scope. BTW - using "let" here introduces an error, I haven't rtesolved yet)

let obj = {prop: 10}; //GS can manipulate object fields and pretty much anything else

let tl = gsap.timeline({repeat: 20, repeatDelay: 1}); //An empty timeline, to hold events defined in setup

​

const modes = {

  START: "start",

  MIDDLE: "middle",

  END: "end"

}

​

let mode = modes.START;

​

//w/ stock JS it's easy enough to "schedule" things to run once in the future...

setTimeout(function() {

  console.log("Hi from the Middle!");

  mode = modes.MIDDLE;

  }, 2000);

​

setTimeout(function() {

  console.log("Hi from the END!");

  mode = modes.END;

  }, 20000);

​

//or recurr periodically:

let count = 0;

let timerID = setInterval(function() {

  console.log("Hi again! (" + count++ + ")");

  if (count>10) {

    console.log("Done!"); 

    clearInterval(timerID);

  }

}, 500);

​

//But it gets a bit cumbersome... better to have a solid library. 

var startTime;

​

function setup() {

  createCanvas(400, 400);

  //Add animation events to the timeline

  //See https://greensock.com/docs/v3/GSAP/Timeline

  tl.to(this, {x: 300, duration: 1}); //animate the X global to value 100 over 1 secpond

  tl.to(this, {y: 3*height/4, duration: 2, delay: -.5});  // animate y

  tl.to(this, {opacity: 255, duration: 1}); //animate opacity

​

  startTime = new Date();

}

​

function draw() {

  switch (mode) {

    case modes.START: 

      background(220);

      stroke(0);

      break;

    case modes.MIDDLE:  

      background(120);

      stroke(0,0,255);

      break;

    case modes.END:  

      background(10);

      break;

  }

  line(obj.prop, 0, obj.prop, height);

  stroke(255, 0, 0);

  fill(128, 0, 0, opacity);

  rect(x, y, 50, 50);

}

​

function mousePressed() {

   gsap.to(obj, {

    duration: random(0.5, 2),

    prop: mouseX, 

    //onUpdate fires each time the tween updates; we'll explain callbacks later.

    onUpdate: function() {

    //console.log(obj.prop); //logs the value on each update.

    }

  });

  var timeDiff = new Date() - startTime; //in ms

  console.log(timeDiff + " ms elapsed since start");

}