gistfile1.js

/**
<div id='range'>
  <div id='cell-thing'></div>
</div>
**/

ShaderState = SC.State.design({
  initialSubState: 'firstState',

  jumpToFirst: function () {
    this.gotoState('firstState');
  },

  jumpToSecond: function () {
    this.gotoState('secondState');
  },

  jumpToThird: function () {
    this.gotoState('thirdState');
  },

  jumpToFourth: function () {
    this.gotoState('fourthState');
  },

  jumpToFifth: function () {
    this.gotoState('fifthState');
  },

  firstState: SC.State.design({
    enterState: function () {
      CellView.adjust('top',0);
    }
  }),

  secondState: SC.State.design({
    enterState: function () {
      CellView.adjust('top',20);
    }
  }),

  thirdState: SC.State.design({
    enterState: function () {
      CellView.adjust('top',40);
    }
  }),

  fourthState: SC.State.design({
    enterState: function () {
      CellView.adjust('top',60);
    }
  }),

  fifthState: SC.State.design({
    enterState: function () {
      CellView.adjust('top',80);
    }
  }),
});