qooxdoo Animation is a low level animation layer which comes with several effects to animate DOM elements. An effect changes one or more attributes of a DOM element from a start to an end value in the given time either linear or using a transition function. Effects can be stacked in a queue and orderd by assigning a startup delay.

• API documentation
• Demos
• Issues

To create an effect instance the desired effect and pass the DOM element, which should be used for the animation, as parameter. The effect can be configured by changing the properties like from, to, duration and more. Once the effect is set up, it can be started by calling the start() method of the effect.

var element = document.getElementById("dlAmount");
var attention = new qx.fx.effect.core.Highlight(element);
 
function update(amount)
{
  element.innerHTML = parseInt(amount);
  attention.start();
}

Every effect has a delay property which can be set to the amount of seconds the effect should wait before it should be executed after calling the start() method on it. You can use this property to arrange effects in the order you want them to be executed.

var el = button1.getContainerElement().getDomElement();
 
var psEffect = new qx.fx.effect.combination.Pulsate(el);
 
// The pulsate effect will take two seconds to execute
psEffect.seDuration(2);
 
var  mvEffect = new qx.fx.effect.core.Move(el);
mvEffect.set({
  x : 100,
  y : 200,
  delay : 2 // Wait two seconds to execute
});
 
// Start both effects at the same time
psEffect.start();
mvEffect.start();

To create own effects, create a new class and extend from qx.fx.Base and overwrite the update() methode. You can access the DOM element of the effect by calling this._getElement().

qx.Class.define("fxdemo.flickerBackground",
{
  extend : qx.fx.Base,
 
  members :
  {
    update : function(value)
    {
      var element = this._getElement();
 
 
      // Value is a floating-point number between the start and end property.
      value +=""; // Convert it to a string.
      value = parseInt(value[value.length-1], 10); // Read the last digit and parse it to integer
      element.style.backgroundColor = "'" + (value % 2 == 0) ? "red" : "blue" + "'";
    }
  }
});

The qx.fx.effect package contains 14 effects:

• ColorFlow

  Changes the background color of an element to a given initial. After that the effects waits a given amount of time before it modifies to background color back to the initial value.

• Drop

  Moves the element to the given direction while fading it out.

• Fade

  Fades in the specified element: it changes to opacity from a given value to another. If target value is 0, it will hide the element, if value is 1, it will show it using the “display” property.

• Fold

  Shrinks the element in width and height until it gets invisible.

• Grow

  Resizes the element from initial dimensions to final dimensions.

• Highlight

  Cycles the background color of the element from initial to final color.

• Move

  Moves to element to the given coordinates.

• Puff

  Resizes the element from zero to the original size of the elment and fades it in at the same time.

• Pulsate

  Fades the element in and out several times.

• Scale

  This effect scales the specified element (and its content, optionally) by given percentages.

• Scroll

  Scrolls to specified coordinates on given element.

• Shake

  Moves the element forwards and backwards several times.

• Shrink

  Resizes the element from initial to given dimensions.

• Switch

  Flickers the element one time and then folds it in.