<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/11/creating-an-animated-transition-when-scrolling-through-items-in-a-spark-hgroup-container/ -->
<s:Application name="Spark_HGroup_horizontalScrollPosition_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.core.NavigationUnit;
 
            protected function scrollToThere(dir:uint):void {
                var value:Number = hGr.getHorizontalScrollPositionDelta(dir);
                if (value != 0) {
                    pth.valueBy = value;
                    anim.play();
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:Animate id="anim" target="{hGr}" duration="500">
            <s:motionPaths>
                <s:SimpleMotionPath id="pth" property="horizontalScrollPosition" />
            </s:motionPaths>
        </s:Animate>
    </fx:Declarations>
 
    <s:Panel title="HGroup horizontalScrollPosition test"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout verticalAlign="middle" />
        </s:layout>
        <s:Button label="&lt;"
                click="scrollToThere(NavigationUnit.PAGE_LEFT);"
                width="30" />
        <s:HGroup id="hGr"
                requestedColumnCount="3"
                columnWidth="100"
                variableColumnWidth="false"
                height="100"
                clipAndEnableScrolling="true">
            <s:Label text="One" backgroundColor="red" backgroundAlpha="0.1" height="100%" />
            <s:Label text="Two" backgroundColor="red" backgroundAlpha="0.2" height="100%" />
            <s:Label text="Three" backgroundColor="red" backgroundAlpha="0.3" height="100%" />
            <s:Label text="Four" backgroundColor="red" backgroundAlpha="0.4" height="100%" />
            <s:Label text="Five" backgroundColor="red" backgroundAlpha="0.5" height="100%" />
            <s:Label text="Six" backgroundColor="red" backgroundAlpha="0.6" height="100%" />
            <s:Label text="Seven" backgroundColor="red" backgroundAlpha="0.7" height="100%" />
            <s:Label text="Eight" backgroundColor="red" backgroundAlpha="0.8" height="100%" />
            <s:Label text="Nine" backgroundColor="red" backgroundAlpha="0.9" height="100%" />
            <s:Label text="Ten" backgroundColor="red" backgroundAlpha="1.0" height="100%" />
        </s:HGroup>
        <s:Button label="&gt;"
                click="scrollToThere(NavigationUnit.PAGE_RIGHT);"
                width="30" />
    </s:Panel>
 
</s:Application>