title: How to implement Slide to delete in Famo.us with proper event handling
body: <p>I'm trying to implement a slide to delete. As part of that I have a layer with opacity set to 0 the idea being I'm trying to set several if clauses to gradual change the opacity of the surface so that the word Delete gentle appears as you slide it to the left. At this point I just have it switching at 10pixels for testing. The functions fire but the opacity doesn't change. I think it has something to do with not being piped/event handling being done properly on my part. Any Ideas?</p>
  
  <pre><code>var SnapTransition = require("famous/transitions/SnapTransition");
  
      Transitionable.registerMethod('snap', SnapTransition);
  
  
  
      var CSS = require("css/recentActivityCSS");
      var Ctrl = require("controllers/recentActivityCtrl");
  
      var homeContentWrap = new Scrollview();
  
      var recentActivities = [];
  
      var ContainerSize = [undefined, 100];
  
      homeContentWrap.sequenceFrom(recentActivities);
  
      for (var i = 0; i &lt; Ctrl.recentActivityList.length; i++) {
  
          var recentActivitiesContainer = new ContainerSurface({
              size: ContainerSize,
              properties: CSS.recentActivitiesContainer,
          });
  
          var redLayer = new Surface({
              size: ContainerSize,
              content: 'DELETE',
              properties: CSS.redLayer,
          });
  
          var draggable = new Draggable({
              xRange: [-120, 5],
              yRange: [0, 0],
          });
  
          var textContainer = new ContainerSurface({
              size: ContainerSize,
              properties: CSS.textContainer,
          });
  
          var mod = new Modifier({});
          node = new RenderNode(draggable);
          node.add(mod).add(textContainer);
  
  
          textContainer.pipe(draggable);
          textContainer.pipe(homeContentWrap);
  
          var opacityMod = new StateModifier({
              opacity: 0
          });
  
          recentActivitiesContainer.add(node);
          recentActivitiesContainer.add(opacityMod).add(redLayer);
  
          recentActivities.push(recentActivitiesContainer);
  
  
          var trans = {
            method: 'snap',
            period: 100,
            dampingRatio: 0.3,
            velocity: 5
          };
  
  
          draggable.on('start', function() {});
          draggable.on('update', function() {
              var position = this.getPosition();
              if (position[0] &gt; (-10)) {
                  opacityMod.halt();
                  opacityMod.setOpacity(0, { curve: 'easeOut', duration: 10 });
              } else {
                  opacityMod.halt();
                  opacityMod.setOpacity(1, { curve: 'easeOut', duration: 10 });
              }
          });
          draggable.on('end', function(){
              var position = this.getPosition();
              if (position[0] &lt; (-100)) {
                  alert('delete');
              }
              this.setPosition([0,0,0], trans);
          });
  </code></pre>