deferred proposal

[ded]

Heyo,
I'd like to gather some thoughts on having a deferred interface for Morpheus would look like. I had some thoughts...

the first seems most attractive, however it's not necessarily callback based, but rather a continual pass of an options hash....

morpheus({
  opacity: 1
})
  .then({
    left: '+=50'
  })
  .then({
    top: '-=40'
  })

this would execute each in order, each waiting for the previous to complete.

another implementation would be just to pass in functions, each executing immediately after the original animation is done....

morpheus({
  opacity: 1
})
  .then(function () {
    // do whatever...
  })
  .then(function () {
    // do whatever
  })

even yet another spin on that — passback complete methods...

morpheus({
  opacity: 1
})
  .then(function (complete) {
    morpheus({
      left: 50,
      complete: complete
    })
  })

or we could spin up a new method that works like the first example, just on a different method...

morpheus.waterfall({

})
  .then({})
  .then({})

thoughts?

[danro]

Nice!

I like the simplicity of the first one, but perhaps a new method would help us create and re-use the sequences later? Being able to stop / start them seems rather useful.

Here's some code for thought:

var seq1 = morepheus.series(other, {});

var seq2 = morepheus.series(el, {
  opacity: 1,
  complete: function () {} // first part completed, do something optional
})
  .then({
    left: '+=50',
    start: seq1.start, // sequence 1 should start here
    update: function (p) {} // second part updated and the position is 0-1
  })
  .then({
    top: '-=40',
    start: function () {} // third part started
  })
  .start()

And a wait method might come in handy, since we're sequencing.

morpheus.series(el, {
  opacity: 1
})
  .wait(400)
  .then({
    top: '-=40'
  })

All of these should be cancelable via the stop() method, of course.. and then perhaps the jump-to-end mode would reduce all the deferred objects together in order?

[rvagg]

I'm easy, as long as I can do it directly off morpheus.tween too; as CSS transitions become the norm, using Morpheus for its generic tweening will likely be one of its most used features (I use it for page scrolling).

I like @danro's extensions but I imagine it getting pretty bloated internally to implement this; is it worth it?
A separate method to create a series may not be necessary if we just add another option to prevent auto-start:

var series = morpheus(el, {
      opacity: 1
    , autostart: false // defaults to true
  })
  .wait(400)
  .then({
    top: '-=40'
  })

series.start()

[danro]

👍 to everything @rvagg said.

If we wanted to sequence tweens and morphs together, how would that look? It's a little confusing because .tween() is unrelated to the el. This may be another argument for an async method.

(not to mention tween almost reads as then)

morpheus(el, {
  opacity: 1
})
.wait(400)
.tween(1000,
  function (position) {
    // do stuff with position...
  },
  function () {
    console.log('done')
  },
  easings.bounce,
  100, // start
  300 // end
)
.then({
  top: '-=40'
})

// even more confusing when reversed:

morpheus.tween(1000,
  function (position) {
    // do stuff with position...
  },
  function () {
    console.log('done')
  },
  easings.bounce,
  100, // start
  300 // end
)
.then(el, { // first time 'el' is mentioned in the series
  opacity: 1
})
.wait(400)
.then({
  top: '-=40'
})

[ded]

i think i'm a bit less attached to having morpheus do it straight away (same with tween). thus, the idea of morpheus.series (or morpheus.sequence) would work well here. however we'd have to work a way into making it work with tween. ultimately i think it's a good idea to have its own start method, which means we couldn't make it work directly out of morpheus — that is unless we force you to pass in an option (autoStart: false or sequence: true)...

[danro]

While we're talking about tween() vs morpheus() I always sort of wish they were unified.

Like as an alternative to using tween, It would be nice to operate on js objects using the morpheus signature.

var vector = { x: 0, y: 0 };
morpheus(vector, {
  duration: 1000,
  x: 100,
  y: 200,
  update: function () {}, // does something with vector
  complete: function () {},
  easing: 'easeOutQuint'
})

Only caveat being that you have some reserved property names for duration, easing, update, etc.

Could see this being super useful when paired with canvas or webgl.