Famo.us Animation across multiple views

I am playing with Famo.us and trying out some of thier layout and transitions.

I am trying to build a set of columns that just fall to the bottom then restart and fall again. Even and odd columns is a different color and starts at a different time to look staggared.

What I am finding is the animation is quickly going out of sync. Is there a way to use the same modifier over a bunch of views. I feel my problem is I created this huge array of views and of modifiers and then doing all the animations seperately. I think if I could just utilize two modifiers maybe they would better stay in sync.

Famo.us Version

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var StateModifier = require('famous/modifiers/StateModifier');
  var GridLayout = require("famous/views/GridLayout");
  var el = document.getElementById('famous-app');
  var View = require('famous/core/View');
  var Modifier = require('famous/core/Modifier');

  surfaceCount = 550;
  width = parseInt($('#famous-app').width());

  boxSize = width / surfaceCount;

  var mainContext = Engine.createContext(el);

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

  var views = [];
  var modifiers = [];
  
  grid.sequenceFrom(views);

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

    var stateModifier = new StateModifier();
    var view = new View();
    var color;

    // Set Even Bars to be blue
    if (parseInt(i) % 2 == 0) {
      color = "blue";
    } 
    // Set Odd Bars to be Green
    else {
      color = "green";
    }
 
    // Create the Surface
    var surface = new Surface({
      size: [boxSize, 300],
      properties: {
        color: color,
        textAlign: 'center',
        backgroundColor: color
      }
    });

    // Add the Surface and its unique Modifier to the View
    view.add(stateModifier).add(surface);

    // Create an array of all Views and thier Modifiers
    modifiers.push(stateModifier);
    views.push(view);
  }

  mainContext.add(grid);

  // Set up the loop to do the animation
  var setup = function() {

    // Go through and start all the bars at the top
    for (var index = 0; index < modifiers.length; index++) {
      modifiers[index].setTransform(
        Transform.translate(0, -300, 0))

    }

    // Start the animation on the odd bars after 500 ms delay.
    window.setTimeout(function() {
      for (var index = 1; index < modifiers.length; index += 2) {
        transform(modifiers[index], 0);

      }
    }, 500);

    // Start the animation on the even bars
    for (var index = 0; index < modifiers.length; index += 2) {
      transform(modifiers[index]);

    }
  }

  // Do the actual transform, when finished repeat
  var transform = function(modifier) {

    modifier.setTransform(
      // Slide bar down over one second
      Transform.translate(0, 300, 0), {
        duration: 1000,
        curve: 'linear'
      },
      function() {
        modifier.setTransform(
          // Move Bar back to starting position
          Transform.translate(0, -300, 0), {
            duration: 0,
            curve: 'linear'
          },
          function() {
            // Repeat
            transform(modifier);
          });

      });
  }

  setup();

});

require(['main']);

.testing-containers {
  height: 600px;
}
.test-container {
  height: 300px;
  overflow: hidden;
  margin: 24px 0;
  position: relative;
}

<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1E7KczM"></script>
<script src="http://ift.tt/1tsADVi"></script>
<script src="http://ift.tt/1tsADVg"></script>
<script src="http://ift.tt/1vQRF1z"></script>

<link rel="stylesheet" type="text/css" href="http://ift.tt/1E7KbMh" />

<script src="http://ift.tt/1CKqt7l"></script>



<div class="test-container">
  <div id="famous-app" style="overflow:hidden;"></div>
</div>