Trying to add a motion path to a panel but i get errors...

Question

hey guys.. im trying to move a panel container from one location to another..
basically when i start off the application the panel's horizontalCenter is set to "0"
what i need it to do is move from that center location to left.
the code i have is...
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
           xmlns:imageHandler="modules.imageHandler.*">
     <fx:Script source="loginSuccessScript.as" />
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
          <s:ArrayCollection id="sourceData">
               <fx:Object label="Content Group" stackId="contentGroup" />
               <fx:Object label="Images" stackId="images" />
               <fx:Object label="Videos" stackId="videos" />
               <fx:Object label="Flash Objects" stackId="flashObjects" />
               <fx:Object label="Story Editor" stackId="storyEditor" />
               <fx:Object label="Tag Management" stackId="tagManagement" />
               <fx:Object label="Image and Video Format" stackId="format" />
               <fx:Object label="Rules And Permissions" stackId="rulesAndPermissions" />
          </s:ArrayCollection>
          <s:Parallel id="clickMove" target="navContainer">
               <s:Animate duration="250">
                    <s:SimpleMotionPath id="motionPath" valueFrom="0" valueTo="300"/>    
               </s:Animate>
               <!--s:Fade id="fade" alphaFrom="0.4" alphaTo="1.0"/-->
          </s:Parallel>
     </fx:Declarations>
     <s:states>
          <s:State name="all" />
          <s:State name="videoUpload" />
          <s:State name="imageUpload" />
          <s:State name="contentGroup" />
          <s:State name="flashObjects" />
     </s:states>
     <s:HGroup horizontalCenter="0">
          <s:Panel id="navContainer" width="250" height="100%">
               <s:List id="nav" width="250" height="100%" dataProvider="{sourceData}" click="updateStack()" />
          </s:Panel>
          <s:Panel width="100%" height="100%" visible="false">
               <mx:ViewStack id="displayComponents" creationPolicy="all">
                    <mx:Canvas id="blank">
                    </mx:Canvas>
                    <mx:Canvas id="images">
                         <imageHandler:imageHandler />
                    </mx:Canvas>
               </mx:ViewStack>
          </s:Panel>
     </s:HGroup>
</s:Group>
and in my actionscript in the updateStack function, i just call clickMove.play();
ive also tried setting the simpleMotionPath property to "x" and "left" and neither of them work...
and when i play the animation i get an error that says
"error: Property null is not a property or a style on object navContainer: TypeError: Error #1006: value is not a function..
or
"error: Property x is not a property or a style on object navContainer: TypeError: Error #1006: value is not a function..
or
"error: Property left is not a property or a style on object navContainer: TypeError: Error #1006: value is not a function..

Answer 1

ok never mind... so i think this i have my problem almost figured out...
i changed my code to resemble the following...
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
           xmlns:imageHandler="modules.imageHandler.*">
     <fx:Script source="loginSuccessScript.as" />
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
          <s:ArrayCollection id="sourceData">
               <fx:Object label="Content Group" stackId="contentGroup" />
               <fx:Object label="Images" stackId="images" />
               <fx:Object label="Videos" stackId="videos" />
               <fx:Object label="Flash Objects" stackId="flashObjects" />
               <fx:Object label="Story Editor" stackId="storyEditor" />
               <fx:Object label="Tag Management" stackId="tagManagement" />
               <fx:Object label="Image and Video Format" stackId="format" />
               <fx:Object label="Rules And Permissions" stackId="rulesAndPermissions" />
          </s:ArrayCollection>
          <s:Parallel id="clickMove" target="{cont}">
               <s:Animate duration="500">
                    <s:SimpleMotionPath id="motionPath" property="left" valueFrom="0" valueTo="600"/>     
               </s:Animate>
               <!--s:Fade id="fade" alphaFrom="0.4" alphaTo="1.0"/-->
          </s:Parallel>
     </fx:Declarations>
     <s:states>
          <s:State name="all" />
          <s:State name="videoUpload" />
          <s:State name="imageUpload" />
          <s:State name="contentGroup" />
          <s:State name="flashObjects" />
     </s:states>
     <s:HGroup horizontalCenter="0" id="cont" height="100%" width="100%">
          <s:Panel id="navContainer" width="250" height="100%" left="300">
               <s:List id="nav" width="250" height="100%" dataProvider="{sourceData}" click="updateStack()" />
          </s:Panel>
          <s:Panel width="30" height="100%" creationPolicy="all">
               <mx:ViewStack id="displayComponents" creationPolicy="all">
                    <mx:Canvas id="blank">
                    </mx:Canvas>
                    <mx:Canvas id="images">
                         <imageHandler:imageHandler />
                    </mx:Canvas>
               </mx:ViewStack>
          </s:Panel>
     </s:HGroup>
</s:Group>
forsome reason my hgroup will not center its self to the window... any reason why?