This document collects some input for developing animation capabilities in qooxdoo 0.8. As qooxdoo 0.8 will include a fundamental low-level DOM layer that may be used instead of the full-featured GUI toolkit part, animation should be available for both regimes. This document currently focuses only on the low-level DOM implementation aspects of animation.

• 117
• 896
  • 897
  • 898
  • 899

• Fade: modifies opacity property
• Move: modifies left and top properties
• Resize: modifies width and height properties
• Colorize: modifies the background color property

Qooxdoo animations is a port of Script.aculo.us to an offer low level layer. It contains the following effects:

• Core effects:
  • qx.fx.effect.core.Fade
  • qx.fx.effect.core.Highlight
  • qx.fx.effect.core.Move
  • qx.fx.effect.core.Scale
  • qx.fx.effect.core.Scroll
  • qx.fx.effect.core.Parallell (helper effect)
• Combination effects:
  • qx.fx.effect.combination.ColorFlow
  • qx.fx.effect.combination.Drop
  • qx.fx.effect.combination.Fold
  • qx.fx.effect.combination.Grow
  • qx.fx.effect.combination.Puff
  • qx.fx.effect.combination.Pulsate
  • qx.fx.effect.combination.Shake
  • qx.fx.effect.combination.Shrink
  • qx.fx.effect.combination.Switch

• Generic effect: update() method must be overwritten to animate designated properties
• Instead of one DOM element, give an array of element which should be animated simultaneously

• Core effects:
  • Appear: fade
  • Fold: resize
  • Highlight: fade
  • Pulsate: colorize
  • Shake: move
  • Squish: resize

• Combination effects:
  • DropOut: move, fade
  • BlindUp: move, fade
  • BlindDown: move, fade
  • SlideUp: move, fade
  • SlideDown: move, fade
  • Grow: move, resize
  • Shrink: move, resize
  • Puff: move, fade, resize
  • SwitchOff: fade, position, resize

License: MIT

http://wiki.script.aculo.us/scriptaculous/show/CombinationEffects

• YAHOO.util.ColorAnim
• YAHOO.util.Motion
• YAHOO.util.Scroll

Effects, which can be added:

YAHOO.util.Easing

• backBoth
• backIn
• backOut
• bounceBoth
• bounceIn
• bounceOut
• easeBoth
• easeBothStrong
• easeIn
• easeInStrong
• easeNone
• easeOut
• easeOutStrong
• elasticBoth
• elasticIn
• elasticOut

License: BSD

http://developer.yahoo.com/yui/animation/

• Fx.Morph
• Fx.Scroll
• Fx.SlideIn
• Fx.Style
• Fx.Transitions

License: MIT

http://docs.mootools.net/Effects/Fx-Base.js

• DojoX FX
  • dojox.fx.sizeTo
  • dojox.fx.addClass
  • dojox.fx.removeClass
  • dojox.fx.toggleClass
  • dojox.fx.crossFade
  • dojox.fx.highlight
  • dojox.fx.slideBy
  • dojox.fx.smoothScroll
  • dojox.fx.easing
    • dojo.fx.easing.easeIn
    • dojo.fx.easing.easeInOut

License: BSD or AFL

http://redesign.dojotoolkit.org/?q=jsdoc/dojox/HEAD/object/dojox.fx http://dojo.jot.com/WikiHome/Animation

• Core effects:
  • slideDown: resize
  • slideToggle: resize
  • slideUp: resize
  • fadeIn: fade
  • fadeOut: fade
  • fadeTo: fade
  • hide: fade
  • show: fade

• Custom effects:
  • animate: sets CSS properties to given values

Easing

• linear
• swing

License: MIT or GPL

http://docs.jquery.com/API/1.1/Effects/Animations

jstween allows the following tweens:

• motion tween
• color tweens
• opacity tweens

It includes a set of easing functions:

• Tween.regularEaseIn
• Tween.regularEaseOut
• Tween.regularEaseInOut
• Tween.strongEaseIn
• Tween.strongEaseOut
• Tween.strongEaseInOut
• Tween.backEaseOut
• Tween.backEaseIn
• Tween.backEaseInOut
• Tween.bounceEaseOut
• Tween.bounceEaseIn
• Tween.bounceEaseInOut
• Tween.elasticEaseIn
• Tween.elasticEaseOut
• Tween.elasticEaseInOut

License: BSD

http://jstween.blogspot.com/

License: BSD

http://wiki.developers.facebook.com/index.php/FBJS/Animation

• animation.add
• animation.stop
• animation.rotate (2D rotation)

Pre-built and custom acceleration/deceleration curves.

Supports referencing of target elements via XPath.

License: Creative Commons 3.0: BY NC ND

http://www.gapjumper.com

• Transition

Currently only supported by Webkit based browsers.