Cross browser animations

One of the new features in the latest 1.6 release was the CSS3 animation layer we introduced. As you can imagine from the name, it is a convenient wrapper for CSS3 animations, which means the client browser needs to implement the CSS3 animations specification. That’s true for most stable browsers in the wild. But what about the rest, like IE9 or Opera? Specifically for those, we added a fallback mechanism based on JavaScript. The best thing about that is its transparent API, which makes it easy to use.

The framework now offers two new classes, one for the CSS implementation and one for the JavaScript implementation. Both can be accessed through a single interface which has taken the place of the old CSS only implementation. Just take a look at the following code snippet to see how it can be used.

var button1 = new qx.ui.form.Button("Click to move");
var move = {duration: 500, keep: 100, keyFrames : {
  0: {left: "0px", top: "0px"},
  100 : {left: "200px", top: "50px"}
button1.addListener("execute", function() {
  var el = button1.getContainerElement().getDomElement();, move);

The first two lines are basic code for adding a button to the application. The next section defines the animation and is the most interesting part. Over the time of 500ms, the animated element should move from 0px / 0px to 200px / 50px and stay there. In the third section, we start the animation on the button itself. As you can see, we need to get the appropriate DOM element for the animation because it’s based on DOM elements and low level usage. This also shows the next development steps for this feature: Bringing a good API to the widget level for widget animation. This works in both scenarios, whether CSS animations are supported or not. You don’t have to worry about that.

But before moving on, we want to encourage you to give it a try and see how far you can go with it. Take a look at the API documentation and see details of both implementations and feel free to give us feedback.

4 thoughts on “Cross browser animations

  1. It is a great implementation!
    Well done!
    A suggestion:
    -add a function called animate for all UI classes
    -put the two lines in the listener in the new function
    => button1.animate(move);

    This would save a lot!

  2. Is there a way to do this in a relative sense? I have a Label Widget that I’m trying to move down a few pixels and it’s origin is not always going to be the same with flex options, etc… It would be cool to make the low-level animation code work on all widgets.