How to animate items in stackpanel animation

Question

I am working on wpf animation.

I need to Translate a stackpanel inside the grid from left to right.

It starts its translation from behind the grid.its work but some part of stackpanel crop by the grid.

If increase the width i can see the full of stack panel.How can solve this issue without increasing the width of Grid.

Here is my code :

    <Grid x:Name="OuterGrid">
        <Grid.Background>
            <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/[email protected]"></ImageBrush>
        </Grid.Background>
        <Grid x:Name="imgBase" Opacity="0">
            <Grid.Background>
                <ImageBrush ImageSource="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]"></ImageBrush>
            </Grid.Background>
        </Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="0,-10,0,0" VerticalAlignment="Top">
            <StackPanel.Resources>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Margin" Value="30"/>
                </Style>
            </StackPanel.Resources>

            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/[email protected]" Width="101" Height="86"  x:Name="topItem1" MouseLeftButtonDown="topItem1_MouseLeftButtonDown">

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/[email protected]" Width="145" Height="86"  x:Name="topItem2" MouseLeftButtonDown="topItem2_MouseLeftButtonDown">

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/[email protected]" Width="172" Height="86"  x:Name="topItem3" >

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/[email protected]" Width="96" Height="86"  x:Name="topItem4" >

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/[email protected]" Width="139" Height="86"  x:Name="topItem5" >

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/[email protected]" Width="139" Height="86"  x:Name="topItem6" >

            </Image>
        </StackPanel>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" x:Name="AllCharacters" Opacity="0">
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgRaman"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgThreysya"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgKurish"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgSynaba"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgMandan"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgThorappan"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgnanu"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/[email protected]" Width="256" Height="432"  x:Name="imgdriver"  />
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="1500" Y="0"></TranslateTransform>
                </TransformGroup>
            </StackPanel.RenderTransform>
        </StackPanel>
        <Grid  VerticalAlignment="Bottom" HorizontalAlignment="Center" x:Name="bottombar" Width="1366" >
            <Grid.Background>
                <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/[email protected]"/>
            </Grid.Background>

            <Grid.RenderTransform>
                <TranslateTransform Y="117" />
            </Grid.RenderTransform>

            <Button Width="104" Height="65" HorizontalAlignment="Right" Margin="0,-120,20,80"  Style="{StaticResource MyButtonStyle}" Click="Button_Click">
                <Button.Background>
                    <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/[email protected]" />
                </Button.Background>
            </Button>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="0,20,0,0">
                <StackPanel.Resources>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Margin" Value="20"/>
                    </Style>
                </StackPanel.Resources>

                <Image Source="pack://application:,,,/Resources/Images/Home/[email protected]" Width="84" Height="73"  x:Name="item1" />
                <Image Source="pack://application:,,,/Resources/Images/Home/[email protected]" Width="88" Height="75"  x:Name="item2"/>
                <Image Source="pack://application:,,,/Resources/Images/Home/[email protected]" Width="135" Height="74"  x:Name="item3"/>
                <Image Source="pack://application:,,,/Resources/Images/Home/[email protected]" Width="78" Height="71"  x:Name="item4"/>
                <Image Source="pack://application:,,,/Resources/Images/Home/[email protected]" Width="150" Height="78"  x:Name="item5"/>
            </StackPanel>
        </Grid>
    </Grid>