<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
    <mx:Button label="add"
               click="{dataProvider.addItemAt({'label' : Math.random()}, 10)}"/>
    <mx:Button label="remove"
               click="{dataProvider.removeItemAt(5)}"/>
    <mx:Button label="remove many"
               click="{removeItems(50)}"/>
    <mx:List id="theList"
             variableRowHeight="true"
             itemsChangeEffect="{effect}"
             width="200"
             height="100%"
             dataProvider="{dataProvider}"/>

    <mx:Script>
        <![CDATA[
            import mx.effects.DefaultListEffect;
            import mx.collections.ArrayCollection;
            [Bindable]
            public var dataProvider:ArrayCollection;

            [Bindable]
            public var effect:DefaultListEffect;

            override protected function childrenCreated():void
            {
                super.childrenCreated();

                effect=new DefaultListEffect();
                effect.removedElementOffset=20;

                dataProvider=new ArrayCollection();

                addItems(3000);
            }

            public function addItems(num:int):void
            {
                for (var i:int=0; i < num; i++)
                {
                    var random:Number=Math.random();
                    dataProvider.addItemAt({'label': random}, 0);
                }
            }

            public function removeItems(num:int):void
            {
                for (var i:int=num; i > 0; i--)
                {
                    dataProvider.removeItemAt(i);
                }
            }
        ]]>
    </mx:Script>
</mx:Application>