Kinetic-drag with jQuery, CSS3 and HTML5


Add a kinetic dragging ability to any elements on HTML5-ready devices and desktops only with one simple line of code.

- was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery's animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.

Pep’s features:

  • built-in support for custom start, stop, rest (called when easing completes)
  • drag events
  • constraining objects to either their parent or the window
  • debugger
  • the ability to customize your own kinetic easing functions

Kinetic-drag with jQuery, CSS3 and HTML5

How to use

Select your jQuery element, then pep it:


Alternatively, you can pass a hash of parameters. Below are the defaults.

Parameters with their defaults:

// show the debugger
        debug:                  false

        // CSS class to append to peppable object
        activeClass:            'active'

        // speed up drag (1 == unity, < 1 == slower, > 1 == faster)
        multiplier:             1,

        // manually fire a stop a peppable object when these events are fired (space delimited)
        stopEvents:             ""

        // get more easing functions here:
        cssEaseString:          "cubic-bezier(0.210, 1, 0.220, 1.000)"

        // how long should it take to ease to its final resting place after mouseup/touchend 
        cssEaseDuration:        1000 

        // let peppable object move outside of window?                                                  
        constrainToWindow:      false

        // let peppable object move outside of parent?
        // EXPERIMENTAL! use with caution. you've been warned.
        constrainToParent:          false

        // fired...
        // ....while dragging
        drag:                   function(ev,obj){ /* fire on drag */ }

        // ... after stopping
        stop:                   function(ev,obj){ /* fire on stop */ }

        // ... after starting
        start:                  function(ev,obj){ /* fire on start */ }

So, for instance, you can log to the console while dragging, debug, and speed up the drag like so:

        var options = {
            debug:          true,
            drag:           function(ev,obj){ console.log('we're dragging!') },
            multiplier:     1.2

Maybe you want to increase the ease time, change some text when you start dragging and upon ease completion:

          var options = {
            start:          function(ev,obj){ $('#title').text('Start!'); },
            drag:           function(ev,obj){ console.log('we're dragging!'); },
            rest:           function(ev,obj){ console.log('ease completed!'); }

Other helper functions:

        obj.setMultiplier(val)          // programmatically increase or decrease the multiplier
        obj.enableEase()                // ... enable ease
        obj.disableEase()               // ... disable ease
        obj.forceStop()                 // ... force the object to stop

pep should work on all modern browsers, such as: Silk Browser/Android 2.3 Gingerbread, iPhone (iOS 5.0), iPad (iOS 5.1)

Get pep.jquery.js


Please enter your comment!
Please enter your name here