Animating a Renderable upon insertion into a Famo.us Scrollview

animate-scrollview-insert.js

// Based on https://github.com/Famous/examples/blob/master/src/examples/views/Scrollview/example.js,
// Using animation method found at: https://launch-demos.famo.us/Taasky/
define(function(require, exports, module) {
  var Engine     = require("famous/core/Engine");
  var Surface    = require("famous/core/Surface");
  var Scrollview = require("famous/views/Scrollview");
  var Timer = require("famous/utilities/Timer");
  var Easing = require("famous/transitions/Easing");

  var RenderNode = require("famous/core/RenderNode");
  var Modifier = require("famous/core/Modifier");
  var Transitionable = require('famous/transitions/Transitionable');

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview();
  var surfaces = [];

  scrollview.sequenceFrom(surfaces);

  for (var i = 0, temp; i < 40; i++) {
    temp = new Surface({
      content: "Surface: " + (i + 1),
      size: [undefined, 200],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
        lineHeight: "200px",
        textAlign: "center"
      }
    });

    temp.pipe(scrollview);
    surfaces.push(temp);
  }

  // Add new surface after 1 second
  Timer.setTimeout(function(){
    var modifier = new Modifier({
      opacity: 0
    });
    var node = new RenderNode(modifier);
    var heightTarget = 200;
    var dynamicSurface = new Surface({
      content: "Dynamic Surface",
      size: [undefined, 0],
      properties: {
        lineHeight: "200px",
        textAlign: "center",
        backgroundColor: "#80e0c0"
      }
    });

    node.add(dynamicSurface);
    dynamicSurface.pipe(scrollview);
    surfaces.unshift(node);

    var opacity = new Transitionable(0);
    var sizeY = new Transitionable(0);

    // Performance implication - both of these functions execute on every tick.
    // They could be deleted after transition is complete if they were non-trivial
    // (allowing prototype function to resume)
    dynamicSurface.getSize = function() {
      var height = sizeY.get();
      return [undefined, height];
    };
    modifier.opacityFrom(function(){
      return opacity.get();
    });

    // Animate the height of the added surface, causing the rest of the list to move down
    sizeY.set(heightTarget, {duration: 500, curve: Easing.outCirc}, function(){
      // Need to set surface size manually after the transition, otherwise the div height is 0
      // (even though space was made for it)
      dynamicSurface.setSize([undefined, heightTarget]);
      // Fade in the item's content
      opacity.set(1, {duration: 500});
    });

  }, 1000);

  mainContext.add(scrollview);
});