title: How to add click event to each surface with specific effects, unable to add modifier
body: <p>How to add click event to each surface with specific effects,  I am not able to add modifier.</p>
  
  <p>I tried below code but its not working.  I am unable to add StateModifier to each surface.
  Please help me to solve this problem as soon as possible.</p>
  
  <pre><code>var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var View = require("famous/core/View");
  var Scrollview = require("famous/views/Scrollview");
  var ContainerSurface = require("famous/surfaces/ContainerSurface");
  var Transform = require('famous/core/Transform');
  var StateModifier = require('famous/modifiers/StateModifier');
  var context = Engine.createContext();
  var myModifier = new StateModifier({
      Transform: Transform.translate(0, 100, 1)
  });
  var surfaces1 = [];
  var scrollers = [];
  var scroll_h1_cont = new ContainerSurface({
      size: [window.innerWidth, 100],
      properties: {
          overflow: 'hidden'
      }
  });
  var scroll_h1 = new Scrollview({
      direction: 0
  });
  scroll_h1.sequenceFrom(surfaces1);
  scroll_h1_cont.add(scroll_h1);
  scrollers.push(scroll_h1_cont);
  for (var i = 0; i &lt; 9; i++) {
      var surface1 = new Surface({
          content: "Surface: " + (i + 1),
          size: [window.innerWidth / 3, 100],
          properties: {
              backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
              lineHeight: "100px",
              textAlign: "center"
          }
      });
      surface1.pipe(scroll_h1);
      surfaces1.push(surface1);
      surface1.pipe(myModifier);
  };
  context.add(scroll_h1_cont);
  </code></pre>
  
  <p>Any suggestions?</p>