p r o p a r t y .js Take control over your CSS3 animations. Download

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(); Play

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(); Play

Cycle 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(); Play

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(); Play

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

Transforms Apply transforms using the .transform method. pp('.example') .set('top', ['80%', '30%', '50%']) .transform('rotateX', ['180deg', '360deg', '0deg']) .transform('rotateY', ['180deg', '0deg']) .start(); Play

Animations Use the .animate method to set a CSS animation. pp('.example') .setDuration(1000) .animate('twisterInDown') .start(); Play

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(); Play

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(); Play

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(); Play

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(); Play

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(); Play

Supported Browsers Proparty supports all modern browsers with CSS transition support. Proparty also works in IE9 even though transitions are not supported.

Dependencies None! Proparty is compatible with jQuery but does not require it.

Roadmap 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();