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.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.