how to add a delay to a famous transition?

Question

I want to stagger an animations starting point. with Transit.js and similar JQuery libs a transition can take a delay parameter. I tried similar with a Famous transition, without effect. I'm wondering if it's needed to wrap a transition inside a Transition-able? I'm a little unclear how these two relate together.

Answer 1

There is currently no way to easily achieve such an effect with the supplied classes, so once again you will have to roll your own solution. Just to be clear, I did not choose to use Transitionable in this case. Transitionable is valuable for creating custom animations and works like a numerical interface to all the transitions. You can see how I used it in this SO question for animating a webkit-blur

Animating blur with the famous framework

But back to your example. I used the Timer class and function binding to iterate over a collection of surfaces and apply the animation to each one. The GridLayout is simply for layout and not relevant to the question.

You could certainly bundle this up into some kind of class of it's own, but this is the most raw example I could build.

Here is the example.. Good Luck

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var EventHandler      = require('famous/core/EventHandler');

var RenderNode        = require('famous/core/RenderNode');
var GridLayout        = require('famous/views/GridLayout');
var Easing            = require('famous/transitions/Easing');
var Timer             = require('famous/utilities/Timer');

var ease = {duration:400, curve: Easing.inOutQuad };

var context = Engine.createContext();

var surfaces = [];
var gridNodes = [];

var grid = new GridLayout({ dimensions:[1,4] });

grid.sequenceFrom(gridNodes);

var animateSurfaces = function(transition,delay){

  transition  = typeof transition !== 'undefined' ? transition  : ease ;
  delay       = typeof delay      !== 'undefined' ? delay       : 200 ;

  for (var i = 0; i < surfaces.length; i++) {

    surface = surfaces[i];

    var animate = function(){

      if (this.visible) {

        this.state.halt();
        this.state.setOpacity(0,ease);

      } else {

        this.state.halt();
        this.state.setOpacity(1,ease);

      }
      this.visible = !this.visible;

    }.bind(surface);

    Timer.setTimeout(animate,delay*i);

  };

}

for (var i = 0; i < 4 ; i++) {

  var surface = new Surface({
    size:[100,100],
    properties: {
      backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
    }
  })

  surface.state = new StateModifier();

  surface.visible = true;

  node = new RenderNode();
  node.add(surface.state).add(surface);

  surfaces.push(surface);
  gridNodes.push(node);

  surface.on('click',animateSurfaces);

};

context.add(new StateModifier({size:[100,400],origin:[0.5,0.5]})).add(grid);