Uncaught TypeError: this._queue[1] is not a function

Question

My index.js looks like this

'use strict';

// Famous dependencies
var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var CustomNode = require('./CustomNode');
var Animation = require('./components/Animation');
// Boilerplate code to make your life easier
FamousEngine.init();

var scene = FamousEngine.createScene('body');
var rootNode = scene.addChild();

var plane = rootNode.addChild(new CustomNode('url(images/plane_100x100.png)', '#B3E5FC', 200, 200, 100, 100));
var animation = new Animation(plane);
animation.start();

where CustomNode.js is

var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
var Transitionable = require('famous/transitions/Transitionable');
var Size = require('famous/components/Size');
var Node = require('famous/core/Node');
function CustomNode(bgUrl, bgColor, xpos, ypos, width, height) {
  Node.call(this);
  this.setSizeMode('absolute', 'absolute')
          .setAbsoluteSize(width, height)
          .setPosition(xpos,ypos);
  this.nodeDomElement = new DOMElement(this);
  this.nodeDomElement.setProperty('backgroundImage', bgUrl);
  this.nodeDomElement.setProperty('zIndex', '2');
  this.nodeDomElement.setProperty('background-color', bgColor);
}
CustomNode.prototype = Object.create(Node.prototype);
CustomNode.prototype.constructor = CustomNode;
module.exports = CustomNode;

And Animation.js looks like this

var FamousEngine = require('famous/core/FamousEngine');
var Transitionable = require('famous/transitions/Transitionable');

// A component that will animate a node's position in x.
function Animation (node) {
    // store a reference to the node
    this.node = node;
    // get an id from the node so that we can update
    this.id = node.addComponent(this);
    // create a new transitionable to drive the animation
    this.xPosition = new Transitionable(100);
}

Animation.prototype.start = function start () {
    // request an update to start the animation
    this.node.requestUpdate(this.id);
    // begin driving the animation
    this.xPosition.from(100).to(1000, {duration: 1000});
    this.node.requestUpdate(this.id);
};

Animation.prototype.onUpdate = function onUpdate () {
    // while the transitionable is still transitioning
    // keep requesting updates
    if (this.xPosition.isActive()) {
        // set the position of the component's node
        // every frame to the value of the transitionable
        this.node.setPosition(this.xPosition.get());
        this.node.requestUpdateOnNextTick(this.id);
    }
};
module.exports = Animation;

But when I run famous dev, I get the following error

Uncaught TypeError: this._queue[1] is not a function

Please note that I am working off of the develop branch of famous/engine

This code is posted on github

https://github.com/codesdk/famous_engine_issue_debug_animation

for easy cloning

Please use the instructions in the README

Answer 1

Be sure to pass the correct arguments into Transitionable#to:

this.xPosition.from(100).to(1000, 'linear', 1000);

Answer 2

You may have mixed up the set and to methods of Transitionable.

this.xPosition.from(100).to(1000, {duration: 1000});

Should be:

    this.xPosition.from(100).to(1000, 'linear', 1000);

Animation.prototype.start = function start () {
    // request an update to start the animation
    this.node.requestUpdate(this.id);
    // begin driving the animation
    this.xPosition.from(100).to(1000, 'linear', 1000);
    this.node.requestUpdate(this.id);
};

Remember that setPosition of a node takes all three axis setPosition(x,y,z)

Animation.prototype.onUpdate = function onUpdate () {
    // while the transitionable is still transitioning
    // keep requesting updates
    if (this.xPosition.isActive()) {
        // set the position of the component's node
        // every frame to the value of the transitionable
        this.node.setPosition(this.xPosition.get(), 0, 0);
        this.node.requestUpdateOnNextTick(this.id);
    }
};