<container>
  <image id="Menu" width="{component.begin.width}" height="{component.begin.height}" src="{component.src}" />
  <action id="myAction1" on="Appear" onEnd="FinishedTransition" >   
      <animate targetNode="Menu" targetAttr="opacity" from="0.8" to="1" dur="300ms" />
      <animate targetNode="Menu" targetAttr="x" from="{component.end.x + component.end.width}" to="{component.end.x - component.end.x*0.1}" begin="0ms" dur="150ms" ease="inout" />
  <animate targetNode="Menu" targetAttr="x" from="{component.end.x - component.end.x*0.1}" to="{component.end.x}" begin="150ms" dur="150ms" ease="inout" />
      <animate targetNode="Menu" targetAttr="y" from="{component.end.y}" to="{component.end.y}" dur="300ms" ease="inout" />
      <animate targetNode="Menu" targetAttr="width" from="{component.end.width}" to="{component.end.width}" dur="300ms" ease="inout" />
      <animate targetNode="Menu" targetAttr="height" from="{component.end.height}" to="{component.end.height}" dur="300ms" ease="inout" />
   </action>

  <action id="myAction2" on="Disappear" onEnd="FinishedTransition" > 
    <animate targetNode="Menu" targetAttr="opacity" from="1" to="0.8" dur="300ms" />
    <animate targetNode="Menu" targetAttr="x" from="{component.begin.x}" to="{component.begin.x - component.begin.x*0.1}" begin="0ms" dur="150ms" ease="inout" />
 <animate targetNode="Menu" targetAttr="x" from="{component.begin.x - component.begin.x*0.1}" to="{component.begin.x + component.begin.width}" begin="150ms" dur="150ms" ease="inout" />
    <animate targetNode="Menu" targetAttr="y" from="{component.begin.y}" to="{component.begin.y}"  dur="300ms" ease="inout" />             
    <animate targetNode="Menu" targetAttr="width" from="{component.begin.width}" to="{component.begin.width}" dur="300ms" ease="inout" />
    <animate targetNode="Menu" targetAttr="height" from="{component.begin.height}" to="{component.begin.height}" dur="300ms" ease="inout" />
  </action>
</container> 

