YUI 3.x Home -

Site Search (YDN & YUIBlog):

# Library Examples: Animation

Note: This is YUI 3.x. Looking for YUI 2.x?

## Animation: Examples

The Animation Utility allows properties to animate the transition between values.

- Basic Animation: Creating and using a simple animation.
- Animation Easing: The Animation Utility allows you to implement 'easing effects' — for example, when an animation gradually slows down as it nears completion, that's an easing effect known as 'ease-in'. This example shows you how to use easing effects with your animations.
- Animating Colors: Color animations can be effective indicators of state during the lifespan of a dynamic page. This example shows you how to animate color attributes of an element.
- Alternating Iterations: The `direction` attribute can be used to reverse the animation on alternate iterations.
- Animating XY Position: This example shows you how to animate the xy coordinates of an element.
- Animating Along a Curved Path: This example demonstrates animating an element along a curved path using bezier control points.
- Animated Scrolling: This example shows how to animate the scrolling of an element.
- Reversing an Animation: The `reverse` attribute allows you to change the run direction of an animation.
- Using the End Event: This example demonstrates how to use the `end` event.
- Chaining Animations Using the `end` Event: Animations can be chained (set to fire sequentially) using Animation's `end` event.

### Examples That Make Use of Animation

- Animation Plugin (included with examples for the Overlay)

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings