Yahoo! Developer Network Home - Help

YDN Site Search

# 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 motion of an HTMLElement along a curved path using control points.

The first thing we need to do is load the Animation source file and dependencies:

<script type="text/javascript" src="../../../2.x/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../../../2.x/build/dom/dom.js"></script> <script type="text/javascript" src="../../../2.x/build/event/event.js"></script> <script type="text/javascript" src="../../../2.x/build/animation/animation.js"></script>

For this example, we will animate the 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> <p>The final step is to call the <code>animate</code> method on our instance to start the animation. The button will be the trigger that begins the animation sequence:</p> <textarea name="code" class="JScript" cols="60" rows="1"> <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
- Animating Colors
- Animating Motion
- Animating Along a Curved Path
- Animated Scrolling

### More Animation Utility Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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