Transitionable callback not working in Famous Engine

Question

Another question while learning the new Famous Engine: When setting a new state for a transitionable, you are allowed to set a callback for when the transition finishes. For me, the transition tweens to the final number for the specified duration, but the callback isn't run. here's my code:

'use strict';

var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

var boxNode = scene.addChild();

boxNode.setSizeMode('absolute', 'absolute')
    .setAbsoluteSize(300, 300);

var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');

var boxTransitionable = new Transitionable(0);

// Callback is specified but it never successfully runs.
boxTransitionable.set(100, { duration: 1000 }, function () { console.log('this never runs'); });

FamousEngine.init();

Answer 1

The reason there is no call to the callback function is that the Transitionable is updated on a get() and does not complete until all iterations in the queue item have completed.

From Guides: It is important to note that Transitionables do not update on their own, they instead calculate the state at the time .get() is called.

Try this code (uncomment from-to line and try it again):

var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();

var boxNode = scene.addChild();

boxNode.setSizeMode('absolute', 'absolute')
    .setAbsoluteSize(300, 300);

var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');

FamousEngine.init();
var clock = FamousEngine.getClock();

var boxTransitionable = new Transitionable(0);

// Callback is ran at end of state.
function done() { 
  console.log('it runs at the end'); 
}
function start() {
  console.log(boxTransitionable.get(), boxTransitionable.isActive());
  if (boxTransitionable.isActive()) {
    clock.setTimeout(start, 200);
  }
}

//boxTransitionable.from(1).to(100, 'linear', 2000,  done);
boxTransitionable.set(1, { duration: 2000, curve: 'linear' },  done);
start();

The Transitionable is a transition between two states over time (tween). The following code snippet is an example using the Transitionable to position a node using a custom component.

var DOMElement = famous.domRenderables.DOMElement;
var Transitionable = famous.transitions.Transitionable;
var FamousEngine = famous.core.FamousEngine;
var Node = famous.core.Node;

// Create scene.
var scene = FamousEngine.createScene();
FamousEngine.init();

var boxNode = scene.addChild();

boxNode.setSizeMode('absolute', 'absolute')
    .setAbsoluteSize(100, 100)
    .setPosition(0,0,0);

boxNode.addUIEvent('click');

var boxElement = new DOMElement(boxNode);
boxElement.setProperty('background-color', 'lightblue');
boxElement.setContent('Click Me');

var clock = FamousEngine.getClock();

var boxTransitionable = new Transitionable(0);

var myComponent = {
  id: null,
  node: null,
  onMount: function (node) {
      this.id = node.addComponent(this);
      this.node = node;
  },
  onReceive(type, event) {
    if (type === 'click') {
      this.node.requestUpdate(this.id);
      boxTransitionable.from(0).to(300, 'outBounce', 2000,  done);
      boxTransitionable.set(0, { duration: 2000, curve: 'outBounce' },  done);
    }
  },
  onUpdate: function() {
    if (boxTransitionable.isActive()) {
      var xpos = boxTransitionable.get();
      console.log(xpos, boxTransitionable.isActive());
      this.node.setPosition(xpos,0,0);
      this.node.requestUpdateOnNextTick(this.id);
    }
  }
};
boxNode.addComponent(myComponent);

// Callback is specified but it never successfully runs.
function done() { 
  console.log('at the end'); 
}

            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
              
            }
            body {
                position: absolute;
                -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
                -webkit-font-smoothing: antialiased;
                -webkit-tap-highlight-color: transparent;
                background-color: black;
                -webkit-perspective: 0;
                perspective: none;
                overflow: hidden;
            }

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Famous0.6.2</title>
        <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
        <meta name="description" content="Transition callback [email protected]">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="http://code.famo.us/famous/0.6.2/famous.min.js"></script>
    </head>
    <body>
    </body>
</html>