proparty.js

Take control over your CSS3 animations.

The Basics

Define a transition using the set method and apply it by calling start. You can use .setWithVendor to automatically include the right vendor prefix.

pp('.example')
  .set('top', '80%')
  .setWithVendor('border-radius', '100px')
  .start();

Multiple Values

Animate between multiple values of a single property by passing an array.

pp('.example')
  .set('top', ['80%', '60%'])
  .set('left', ['80%', '20%', '50%'])
  .start();

Loop the transition by setting cycle in the configuration object or by calling .setSettings({ cycle: <num> }). Cycle can set to true to loop indefinitely or to an integer to set the number of cycles to run. A single cycle is one interation of a transition.

pp('.example', { cycle: 7 })
  .set('top', ['80%', '60%', '20%', '40%'])
  .set('left', ['80%', '20%', '50%'])
  .start();

Duration/Delay

Change the timing or delay of each transition using the configuration object or by using the.setSettings method. Setting delay will set the delay before the next transition starts and initialDelay controls the delay before the first transition.

pp('.example')
  .setSettings({ duration: 1000, delay: 250, initialDelay: 500 })
  .set('padding', ['40px', '20px'])
  .set('opacity', ['0.5', '1.0'])
  .start();

Easing

Change the transition timing function by setting the ease option. Allowed easing values are:

Transforms

Apply transforms using the .transform method.

pp('.example')
  .set('top', ['80%', '30%', '50%'])
  .transform('rotateX', ['180deg', '360deg', '0deg'])
  .transform('rotateY', ['180deg', '0deg'])
  .start();

Animations

Use the .animate method to set a CSS animation.

pp('.example')
  .setDuration(1000)
  .animate('twisterInDown')
  .start();

Using Functions

You can pass in a function or an array of functions to set a property's value. If a single function is passed in it will be called for each iteration. You may want to set the number of cycles or the transition will never finish.

pp('.example')
  .setCycle(5)
  .set('top', function () { 
    return Math.floor((Math.random() * 80) + 1) + '%'; 
  })
  .transform('rotate', [
    function () { return (this.inc + 1) * 45 + 'deg'; },
    function () { return (this.inc + 1) * 90 + 'deg'; }
  ])
  .start();

Adding/Subtracting

Proparty provides helper functions to add, subtract, multiply and divide from the current value of the property. You can easily extend proparty to add your own functions as well. Operations currently work best using pixels.

pp('.example')
  .setCycle(5)
  .set('top', pp.math.subtract('40px'))
  .set('left', pp.math.add('40px'))
  .start();

Methods

You can pause and stop transitions using .pause and .stop respectively. Starting after a pause will resume from the current cycle whereas a stop will resume from the first cycle.

var ppExample = pp('.example')
  .setCycle(true)
  .set('top', ['15%', '85%', '85%', '15%'])
  .set('left', ['15%', '15%', '85%', '85%'])
  .set('background-color', function () { 
    return '#' + (Math.random().toString(16) + '000000').slice(2, 8); 
  });
  .start();


// pause transitions
ppExample.pause();

// stop transitions
ppExample.stop();

// destroy and call any queued up transitions
ppExample.destroy();

Callbacks

Use .whenStarted, .whenPaused and .whenStopped to register callbacks.

pp('.example')
  .setCycle(6)
  .transform('skew', ['20deg, 60deg', '-20deg, -60deg', '0deg, 0deg'])
  .transform('rotateY', ['180deg', '180deg', '0deg'])
  .whenStarted(function () { $('.text').html('Started!'); })
  .whenPaused(function () { $('.text').html('Paused!'); })
  .whenStopped(function () { $('.text').html('Stopped!'); })
  .start();

Chaining

Queue up transitions using the .chain method.

pp('.example')
  .set('top', ['20%', '80%'])
  .set('left', '20%')
  .chain(function () {
    return pp('.example-two')
      .set('top', ['20%', '80%'])
      .set('left', '80%')
  })
  .start();

Allowing mulitple elements to be animated with the same instance.
Forcing hardware acceleration to improve iOS performance.

Reduce internal state to allow for branching off of transitions without mutatation. i.e.

var ppOne = pp('.example').set('left', '20%');
var ppTwo = ppOne.set('top', ['20%', '80%']); // this will mutate ppOne

ppOne.start();
ppTwo.start();

Credits

Proparty was inspired by move.js, special thanks to the creators for an awesome library!