Transforms and Animations

One of the big pieces in the whole new CSS3 world are animations and transforms with all the hype about 3D, hardware acceleration and the combinations of both of them. But as always, browser vendors introduce these new features not at the same time with the same amount of features and addressable with the same CSS keys. Too bad for most people but good for us as framework developers because thats one of the reasons we do exist at all!

In case of animations, the browser support is not as big as with transforms. Only webkit and gecko based browsers support animations. The support for simple transforms is a bit better, all stable browsers support simple transforms, even the mobile browsers. But when it comes to the 3D transforms, the number of browsers supporting 3D drops drastically. Basically, only the stable webkit based browser support it. But Microsoft and Mozilla are working on it to get it into their browsers soon. As you might already have guessed, all the CSS properties do have vendor prefixes.

But those prefixes should not bother you if you want to use the qooxdoo classes I recently added. Basically, there has been two main classes added, one for transfoms and one for animations. I tried to keep the API close to the CSS spec and all of you familiar with it will realize it quite quickly. For all of you who have no Idea about all that stuff its also good because if you get in touch with the qooxdoo API, you also learn pieces of the spec! But now, how does it look in qooxdoo. Lets take a first look at Transforms.

Transforms

Transforms are basically defined by their transform function and are only good for transforming elements. They are not responsible for any dynamic movement of elements. The basic transform function will give you an idea whats possible to do with transforms: Scale, Translate, Rotate, Skew.

But lets take a look at the transforms applied in the demo above.

var box = document.getElementById("scale");
qx.bom.element.Transform.scale(box, 0.8);
 
box = document.getElementById("translate");
qx.bom.element.Transform.translate(box, ["10px", "10px"]);
 
box = document.getElementById("rotate");
qx.bom.element.Transform.rotate(box, "45deg");
 
box = document.getElementById("skew");
qx.bom.element.Transform.skew(box, "25deg");

There is a lot of other stuff you can do with the new Transform class. A demo shows all the possibilities the native Trasform API can offer and with that, also what the qooxdoo wrapper can offer. For the best result, take a webkit based browser like Safari or Chrome to view the demo.

Animations

Only with animations comes the dynamic into the application. As you can expect, animations define a change of something over a given amount of time. Thats the key feature of animations. But what can be changed and how can we define that?
The first questions is easy to answer, we can change CSS properties. The following demo shows a animations of the width property.

The code for this simple animations is also easy to read.

var desc = {duration: 1000, timing: "ease-out", keyFrames : {
  0 : {"width" : "30px"},
  70 : {"width" : "100px"},
  100 : {"width": "30px"}
}};
var box = document.getElementById("box");
qx.bom.element.Animation.animate(box, desc);

The main part of this code is the key frames map with three entries. The first one defined by 0 specifies the animations at the beginning of the animation. The next one defined by 70 holds the CSS properties at 70% of the animation time. The last one specifies the animations state at 100% animation time. Thats an easy animation which only takes simple CSS properties into account. But you can also animate transforms, which brings both technologies together.

This shows a 3D rotation taken from a demo app which you can try yourself. Again, it shows the best results if you use a webkit based browser.

After finishing those two classes, I wanted to use the code immediately. This brought a app we added recently into my mind, the website view of the feed reader. I added some animations there to see how if new animations is fine to use. During that, I added a simple fallback for browsers not having CSS animation support. This means the animation class makes sure that in every browser, the animated element comes to the same end state, no matter if there has been an animation or not. You can see that very well in the feedreader sample. With animation support, the lists are faded in and out. If the browser does not support animations, the lists will simply end up being shown without any fading and thats it. Good enough in most cases because the animation is only there to support the UI and not to supply some necessary feedback for the user.

This new features are available in the master branch on github and can be found in the next stable release. As always, the code is there to give you a change to give it a try and give feedback!

6 thoughts on “Transforms and Animations

  1. Very interesting, I’ve “discovered” the bom package of qooxdoo not much long ago, for integrate stuff like tinyMCE and highcharts. Solid implementation, this additions are awesome. Thanks Martin.

  2. Pingback: qooxdoo » News » The week in qooxdoo (2011-11-11)

  3. Clean and simple interface! Good work! Now to compatibility with other non-compliant browsers. How is that possible to do? :-)

  4. @Stefan
    Thats the really interesting question! I mean the whole transform stuff is not really portable to browsers not supporting it. But the plain CSS animations could be faked with JavaScript. We will see how far we can / will go with the fallback implementations.

  5. Pingback: qooxdoo » News » qooxdoo 1.6 released