Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation Utility: Animating From a Given Value

# Animation Utility: Animating From a Given Value

This demonstrates how to start a YUI Animation from a given value. Click the button to begin the demo.

View example in new window.

Demo

## Starting an Animation From a Given Value

The YUI Animation Utility allows you to specify arbitrary starting values for your animations.

For this example, we will animate the width of the `<div>` element named `demo`.

Add a little style so that we can see the animation in action:

<style type="text/css"> #demo { background:#ccc; overflow:hidden; /* so we can animate to zero width */ width:200px; } </style>

Create the `demo` element and a button to run the animation:

<div id="demo">Demo</div> <button id="demo-run">run</button>

Now we create an instance of `YAHOO.util.Anim`, passing it the element we wish to animate, and the style attribute(s) to be animated. The `from` field is optional (will start from current value if omitted). In this case, we will start from 600:

<script type="text/javascript"> var attributes = { width: { from: 600, to: 0 } }; var anim = new YAHOO.util.Anim('demo', attributes); </script>

The final step is to call the `animate` method on our instance to start the animation. The button will be the trigger that begins the animation sequence:

<script type="text/javascript"> YAHOO.util.Event.on('demo-run', 'click', function() { anim.animate(); }); </script>

This is an example of customizing the starting animation value with YUI Animation Utility.

### Animation Utility Examples:

### More Animation Utility Resources:

- 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