Demos

Demo #1 - Hello, Pep!

$('#peppable-demo-1').pep();

Demo #2 - Constrain to parent

$('#peppable').pep({
  constrainToParent: true
});

Demo #3 - Custom (but ridiculous!) easing function from Matt Lein's Ceaser

Get more easy functions →

$('#peppable').pep({
  cssEaseString: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
  cssEaseDuration: 1000
});

Demo #4 - Utilizing drag, stop, & rest events (webkit only, sorry!)

function randomColor(){ 
  return '#'+Math.floor(Math.random()*16777215).toString(16); 
}

$('#peppable').pep({
  drag: function(ev,obj){ $(obj.el).css({ background: randomColor() }) },
  stop: function(ev,obj){ 
    $(obj.el).css({ "-webkit-transform": "scale("+ 0.3 +")" }) 
  },
  rest: function(ev,obj){
    $(obj.el).css({ "-webkit-transform": "scale("+ 1 +")" })
  }
});

Demo #5 - Zoom slider

$('#peppable').pep({
  constrainToParent: true,
  drag: function(ev, obj){ 
    var el = $(obj.el);
    var val = (el.parent().height() - el.position().top) / el.parent().height();
    $('#zoom-me').css({ '-webkit-transform': 'scale(' + val + ')',
                        '-moz-transform': 'scale(' + val + ')',
                        '-ms-transform': 'scale(' + val + ')',
                        '-o-transform': 'scale(' + val + ')',
                        'transform': 'scale(' + val + ')' });
  }
});

#zoom-me

Demo #6 - Allow movement along only a single axis

$('#peppable-a').pep({ axis: 'x' });
$('#peppable-b').pep({ axis: 'y' });