YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation Utility

# Animation Utility: Examples

The Animation Utility enables the rapid prototyping and implementation of animations involving size, opacity, color, position, and other visual characteristics.

- 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 From a Given Value: Animations usually begin with the current value (e.g., a motion animation usually begins with the current position of the moving element). However, the starting position can be customized; this example shows you how.
- Using Custom Units for an Animation: By default, animations are set in terms of a property's default units (often pixels or percent). This example shows you how to specificy custom units with Animation.
- Animating Multiple Attributes: This example demonstrates how to animate multiple attributes of an HTMLElement.
- Chaining Animations Using `onComplete`: Animations can be chained (set to fire sequentially) using Animation's onComplete custom event; this simple example shows you how.
- 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 HTMLElement.
- Animating Motion: This example shows you how to animate the motion path of an HTMLElement.
- Animating Along a Curved Path: This example explores motion animation by moving an HTMLElement along a curved path using control points.
- Animated Scrolling: This example shows how to animate the scrolling of an HTMLElement.

## Other YUI Examples That Make Use of the Animation Utility

- Glowing Button (included with examples for the Button Control)
- Complex Application (included with examples for the Layout Manager)

### Animation Utility:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF(external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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