Welcome to tradewind.js!

I am proud to present you tradewind.js, a JavaScript plugin that implements a user-friendly interface for powerful CSS3 animations.

For a nice demonstration of this powerful plugin, please have a look at adrdilauro.github.io.

Already a user of tradewind.js? You might be interested in the complete documentation.

Do you use Ruby? Have a look at the ruby gem wrapper for tradewind.js.

At least as intuitive as jQueryUI

Forget jQueryUI's heavy and buggy handling of jQuery objects! With jQueryUI your JavaScript does a lot of hidden work to show small animations, tradewind.js instead does the minimum and gets a result that users feel like magic.

Firefox and Chrome didn't even agree how many end events should be fired in the end of a CSS3 animation? Did you get stuck in questions like this? Forget about it, tradewind.js simply calculates the transition times and provides you a callback using vanilla JavaScript!

tradewind.js is written in vanilla JavaScript!

Animations won't work because they are not supported, but the overall effect is still perfectly acceptable, being analogous to a simple change of style. You don't have to give up on animations because some of your users still have old browsers!

Default transitions are overwritten during the animation, and restored at its end.

CSS3 animations are smooth, light, and included in HTML5 specifications, but they are really uncomfortable to use, because:

1. they must be attached on an element previously, and on a whitelist of selected properties: the actual animation will take place later, when you change style of one of the those properties;
2. they are very verbose and they need prefixes;
3. they must be written inside the CSS, forcing the developer to write animation's logics in an obscure way, and outside of the JavaScript files.

Now, tradewind.js lets you enjoy the power of CSS3 animations without noticing these problems!

A very simple example:

tradeWind.run([
  {
    elements: "#first-div",
    animations: [
      "background-color #123456 0.5s 0.2s",
      "top 100px 1s",
    ]
  },
  {
    elements: "#second-div, #third-div",
    animations: [
      "opacity 0.8 0.7s",
    ]
  }
]);

This call will smoothly change the background color of #first-div, with a delay of 0.2, and move it until a top position of 100px. Contemporaneously, it will smoothly change the opacity of both #second-div and #third-div, until a value of 0.8.

Want to know more? For the detailed API, have a look at the official documentation.