Shrink
Grow(on click)
Fold
Unfold
Pulse
Shadow
Appear
Shake LR
Shake TB
Fade
Drop
TV
Fade
(on mouse over)
Blind Up
(with ghost) +
Blind Down
(with bounce)
Blind Up +
Blind Down +
Blind Right +
Drop +
Appear
Blind Up
Blind Down
Blind Left
Blind Right
Blind Right +
Appear
binded right
click for more - click again for less
These effects were created by dave glass using YUI's Animation library.
  • To create an animation on an object you add a behaviour
    someComponent
    .add(new Animation(OnEvent.click));
  • The Animation does not have any Effects, and you need to provide it by adding (chain) multiple Effects together
    new Animation(OnEvent.click)
    .add(new Effect(Effect.Type.Fade, delay))
    .add(new Effect(Effect.Type.Appear, delay)));
  • Each Effect can have different types of Attributes like "ghosting (fading effect), easing, delay etc" see here. Attributes can be chained as well
    Attributes attributes = new Attributes("ghosting", "true")
    attributes.add("delay", "true")
    .add("ease", Easing.elasticBoth.function());
    new Effect(Effect.Type.Fade, attributes));
  • Animation on a component is triggered when an event (click/mouseover) on the component occurs. You override the tiggerId to allow the Animation to be triggered by another markup id (not necessary a component)
  • Mulitple Animation. You can do component.add(animation) with different animation effects with the same event. and each animation will be cycled through. e.g. component.add(animation(click).add(blindDownEffect); component.add(animation(click).add(blindUpEffect); if you click on the above "click for more..." again it will execute the 2nd animation and cycle to the first one