YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation Utility: Animated Scrolling

# Animation Utility: Animated Scrolling

This demonstrates how to use the YUI Animation to animate the scrolling of an HTMLElement. Click the button to begin the demo.

View example in new window.

Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.

## Animated Scrolling

The YUI Animation Utility allows you to animate the scroll position of an HTMLElement.

For this example, we will animate the scroll position of a `<div>` element named `demo`. The `scroll` attribute, introduced in the `YAHOO.util.Scroll` subclass, accepts an optional `control` field of one or more control points

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

<style type="text/css"> #demo { height:6em; width:20em; overflow:auto; } </style>

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

<div id="demo"> <p>Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.</p> </div> <button id="demo-run">run</button>

Now we create an instance of `YAHOO.util.Scroll`, passing it the element we wish to animate, and the scroll attribute (an array of [left, top] scroll values), with the scroll amount we are animating:

<script type="text/javascript"> var attributes = { scroll: { to: [0, 200] } }; var anim = new YAHOO.util.Scroll('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 animating the scrolling of an HTMLElement.

### Animation Utility Examples:

- Basic Animation
- Animation Easing
- Animating From a Given Value
- Using Custom Units for an Animation
- Animating Multiple Attributes
- Chaining Animations Using `onComplete`
- Animating Colors
- Animating Motion
- Animating Along a Curved Path
- Animated Scrolling
- Glowing Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)

### 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