Skip to main content

Scrolling List using Tween

We had a situation requiring up and down buttons, and we wanted them to scroll a list. The catch is how to animate the scrolling. Here’s how we did it.
In a nutshell, the Tween class (mx.effects.Tween) allows you to pass 2 numbers and get periodic updates of numbers incrimenting between the them.  For example, given the number 0 and the number 100, we can set the Tween function to increment between them over a period of 10,000ms (10 seconds).  The tween class will then poll a function called “onTweenUpdate” with numbers from 0 to 100 over the 10 second period.

Generally you can write this:

import mx.effects.Tween;

var myListener:Object = new Object();

myListener.onTweenUpdate = function(i:Number) {
// do something with i

var myTween:Tween = new Tween(myListener,0,100,10000);

We then applied this to the scrolling <mx:List> object so that the up button and down button initiate Tween functions to set the scroll position of the list.

Get the source: ScrollTween.mxml

	import mx.effects.Tween;

	private var myData:Array = [

	public function onTweenUpdate(position:Number):void {
		myList.verticalScrollPosition = Math.round(position);

	public function onTweenEnd(position:Number):void {

	private function refreshButtons(position:Number=0):void {
		upBtn.enabled = (position > 0) ? true : false;
		downBtn.enabled = (position < myList.maxVerticalScrollPosition) ? true : false;

	private function scroll(direction:String):void {
		var target:Number
		var current:Number = myList.verticalScrollPosition;
		if (direction == 'up') {
			// find the top scroll position
			target = Math.max(current - myList.rowCount, 0);
		} else {
			// find the bottom scroll position
			target = Math.min(current + myList.rowCount, myList.maxVerticalScrollPosition);
		var t:Tween = new Tween(this,current,target,1000);

<mx:VBox width="200" paddingLeft="10" paddingTop="10">
	<mx:Button id="upBtn" label="Scroll Up" click="scroll('up')" width="100%"/>
	<mx:List id="myList" dataProvider="{myData}" creationComplete="refreshButtons()" verticalScrollPolicy="off" width="100%"/>
	<mx:Button id="downBtn" label="Scroll Down" click="scroll('down')" width="100%"/>




I lead a fantastic team of WordPress developers building enterprise level WordPress systems. On occasion I have been known to speak at conferences on the topics of Freelancing, WordPress, and the meaning of life, though I tend to spend much of my performance energy on my music. Perhaps one day I will figure out how to merge the two without having to write songs about debugging Javascript.