Keeping Animation States on Item renderers when scrolling TileList

Question

Hey all,
            so I have a simple custom item renderer (CustomRenderer.as) which has a FlexShape that gets tweened by TweenLite depending on the percent value in the data value object (CustomRendererData.as). So in the example below I have 8 items
|    DATA ITEM 1     |    DATA ITEM 2     |      DATA ITEM 3     |     DATA ITEM 4     |
|    DATA ITEM 5     |    DATA ITEM 6     |      DATA ITEM 7     |     DATA ITEM 8    |
The issue I run into is when i scroll (vertically) the FlexShape starts to Tween from the previous data values.
For example DATA ITEM 1 is has tweened upto 80% and DATA ITEM 2 has tweened up to 20% . DATAITEM 2 appears to be at 80% first and then Tweens to 20% . You can try the sample below. Once you clicck on the Load Data button the animations will begin. When you use the scroll bar you can see the animation states being swapped to the previous data renderer items and then resuming their orignal values
package
     [Bindable]
     public class CustomRendererData
          public var percent:int=0;
          public var title:String;
          public var color:uint;
          public var time:int;
          public var isUploading:Boolean = false;          
          public function CustomRendererData(){}
package
     import flash.geom.ColorTransform;
     import gs.TweenLite;
     import mx.controls.Label;
     import mx.controls.listClasses.IListItemRenderer;
     import mx.core.FlexShape;
     import mx.core.IDataRenderer;
     import mx.core.UIComponent;
     public class CustomRenderer extends UIComponent implements IListItemRenderer, IDataRenderer
          protected var _progressBar:FlexShape;
          protected var _data:CustomRendererData;
          protected var _percentValue:int;
          protected var _percentChanged:Boolean;
          protected var _progressBarTween:TweenLite;
          protected var _title:Label;
          protected var _titleValue:String;
          protected var _titleChanged:Boolean;
          protected var _colorValue:uint;
          protected var _colorChanged:Boolean;
          protected var _uploadingChanged:Boolean;          
          protected var _isUploading:Boolean;          
          public function CustomRenderer()
               super();
          override protected function createChildren():void
               super.createChildren();
               if (!_progressBar)
                    _progressBar=new FlexShape();                    
                    _progressBar.x=_progressBar.y=4;
                    __drawProgressBar();
                    addChild(_progressBar);
               if (!_title)
                    _title=new Label();
                    _title.setActualSize(100,22);                    
                    _title.x=4;
                    _title.y=120;     
                    _title.text ="data";
                    _title.setStyle("color" , 0xffffff);               
                    addChild(_title);
               this.graphics.beginFill(0x333333, 1);
               this.graphics.drawRect(0, 0, 124, 148);
               this.graphics.endFill();
               _percentChanged = false;
               _titleChanged = false;
               _uploadingChanged = false;
               _isUploading = false;
               _colorChanged = false;
               _percentValue = 0;
          private function __drawProgressBar():void
               _progressBar.graphics.beginFill(0xffffff, 1);
               _progressBar.graphics.drawRect(0, 0, 1, 87);
               _progressBar.graphics.endFill();
          //_progressBar.width=0;
          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
               super.updateDisplayList(unscaledWidth, unscaledHeight);
          override protected function commitProperties():void
               super.commitProperties();
               if (_data)
                    //if(_uploadingChanged)
                         //_uploadingChanged = false;
                         if(_isUploading)
                              if(_percentChanged)
                                   _percentChanged = false;
                                   if(_progressBarTween)
                                        TweenLite.removeTween(_progressBarTween);                                        
                                   const newWidth:int = Math.round((_data.percent * 116) / 100);
                                   //_progressBar.width = newWidth;
                                   _progressBarTween=TweenLite.to(_progressBar, _data.time, {width:newWidth});                                   
                         else
                    if(_titleChanged)
                         _titleChanged = false;
                         _title.text = _titleValue;
                    if(_colorChanged)
                         _colorChanged = false;
                         var colorTransform:ColorTransform;
                         colorTransform=_progressBar.transform.colorTransform;
                         colorTransform.color = _data.color;
                         _progressBar.transform.colorTransform=colorTransform;     
          public function set data(obj:Object):void
               _data=obj as CustomRendererData;
               if(_data)
                    if(_data.percent != _percentValue)
                         _percentValue = _data.percent;                         
                         _percentChanged = true;
                    if(_titleValue != _data.title)
                         _titleValue = _data.title;                         
                         _titleChanged = true;
                    if(_colorValue != _data.color)
                         _colorValue = _data.color;                         
                         _colorChanged = true;
                    if(_isUploading != _data.isUploading)
                         _isUploading = _data.isUploading;                         
                         _uploadingChanged = true;
               invalidateProperties();
               invalidateDisplayList();
          public function get data():Object
               return _data;
          override protected function measure():void
               super.measure();
               measuredWidth=124;
               measuredHeight=148;
               measuredMinWidth=124;
               measuredMinHeight=148;
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="vertical"
                    xmlns:local="*" applicationComplete="init();" height="375">
     <mx:Script>
          <![CDATA[
               import mx.collections.ArrayCollection;
               public var data1:CustomRendererData = new CustomRendererData();
               public var data2:CustomRendererData = new CustomRendererData();
               public var data3:CustomRendererData = new CustomRendererData();
               public var data4:CustomRendererData = new CustomRendererData();               
               public var data5:CustomRendererData = new CustomRendererData();               
               public var data6:CustomRendererData = new CustomRendererData();               
               public var data7:CustomRendererData = new CustomRendererData();               
               public var data8:CustomRendererData = new CustomRendererData();               
               [Bindable]
               public var coll:ArrayCollection=new ArrayCollection([data1, data2, data3, data4, data5, data6, data7, data8]);
               private var _changePercentTimer:Timer;
               private function init():void
                    data1.title ="data1";
                    data1.color = 0xff0000;
                    data1.time = 8;
                    data1.isUploading = true;
                    data2.title ="data2";
                    data2.color = 0x00ff00;
                    data2.time = 11;
                    data2.isUploading = true;
                    data3.title ="data3";
                    data3.color = 0x0000ff;
                    data3.time = 9;
                    data3.isUploading = true;
                    data4.title ="data4";
                    data4.color = 0x00ffff;
                    data4.time = 13;
                    data4.isUploading = true;
                    data5.title ="data5";
                    data5.color = 0xffff00;
                    data5.time = 12;
                    data5.isUploading = true;
                    data6.title ="data6";
                    data6.color = 0xff00ff;
                    data6.time = 18;
                    data6.isUploading = true;
                    data7.title ="data7";
                    data7.color = 0xfff0ff;
                    data7.time = 15;
                    data7.isUploading = true;
                    data8.title ="data8";
                    data8.color = 0xaff9ff;
                    data8.time = 15;
                    data8.isUploading = true;
                    _changePercentTimer = new Timer(1000,5);
                    _changePercentTimer.addEventListener(TimerEvent.TIMER , onChangePercentHandler , false ,0  , true);
               public function onChangePercentHandler(event:TimerEvent):void
                    data1.percent+=3;
                    data3.percent+=10;
                    data2.percent+=20;
                    data4.percent+=11;
                    data5.percent+=5;
                    data6.percent+=13;
                    data7.percent+=18;
                    data8.percent+=8;
                    trace (data1.percent , data2.percent ,data3.percent , data4.percent);
               public function itemClick():void
                    _changePercentTimer.start();
          ]]>
     </mx:Script>
     <mx:TileList id="list"
                          itemRenderer="CustomRenderer"
                          width="640"
                          height="150"                         
                          useRollOver="false"
                          dataProvider="{coll}"
                          columnWidth="150"
                          itemClick="itemClick();"
                          dropEnabled="true"
                          dragEnabled="true"
                          dragMoveEnabled="true"
                          paddingLeft="10">
     </mx:TileList>
     <mx:Button label="LoadData" click="itemClick();"/>
</mx:Application>

Answer 1

The problem with renderers is that they're recycled, so probably that's why  your List keep losing the animation states.