How to make Flexstore effect with TileList?

[test157]

Hi all,

I think most of you know how smootlhy and really cool reorginized mobilephones in flexstore - here is the example: http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html - press products button to see it and select there any phone you like.

And the question is - how I can repeat this effect with Tile List?

Here Is my sample code I have:

<mx:TileList id="AppSelection" width="600" height="158" color="0x323232" columnWidth="126" maxColumns="8" itemsChangeEffect="Fade" allowMultipleSelection="true" >
<mx:dataProvider>
<mx:Array>
<mx:Object label="Backpack" icon="@Embed('assets/icon_compare.png')"/>
<mx:Object label="Compass" icon="@Embed('assets/icon_details.png')"/>
<mx:Object label="Goggles" icon="@Embed('assets/icon_magnifier.png')"/>
<mx:Object label="Boots" icon="@Embed('assets/icon_tiles.png')"/>
<mx:Object label="Helmet" icon="@Embed('assets/logo_orange.png')"/>
<mx:Object label="Backpack" icon="@Embed('assets/icon_compare.png')"/>
<mx:Object label="Compass" icon="@Embed('assets/icon_details.png')"/>
<mx:Object label="Goggles" icon="@Embed('assets/icon_magnifier.png')"/>
<mx:Object label="Boots" icon="@Embed('assets/icon_tiles.png')"/>
<mx:Object label="Helmet" icon="@Embed('assets/logo_orange.png')"/>
<mx:Object label="Backpack" icon="@Embed('assets/icon_compare.png')"/>
<mx:Object label="Compass" icon="@Embed('assets/icon_details.png')"/>
<mx:Object label="Goggles" icon="@Embed('assets/icon_magnifier.png')"/>
<mx:Object label="Boots" icon="@Embed('assets/icon_tiles.png')"/>
<mx:Object label="Helmet" icon="@Embed('assets/logo_orange.png')"/>
</mx:Array>
</mx:dataProvider>
</mx:TileList>
<mx:Button click="currentState='browse'" y="350">

</mx:Button>
<mx:Button click="currentState='compare'" y="300">

</mx:Button>

<mx:states>
<mx:State name="browse">
<mx:SetProperty target="{AppSelection}" name="maxColumns" value="1"/>
<mx:SetProperty target="{AppSelection}" name="width" value="130"/>
</mx:State>

<mx:State name="compare">
<mx:SetProperty target="{AppSelection}" name="maxColumns" value="8"/>
<mx:SetProperty target="{AppSelection}" name="width" value="500"/>
</mx:State>
</mx:states>

<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{AppSelection}" />
</mx:Transition>
</mx:transitions>

So I'am useing Resize transiction for state, where I change maxColumns Size and TileList width - but while resize is going very smooth, reorganization on items inside of tilelist are done without any effect just in one step! So how I can reorginize them smoothly also?