No motion animation of objects

Question

<!--ANIMATED ELLIPSES TO CORNERS-->
    <Storyboard x:Key="EllipseIniteKnob" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="15" Duration="00:00:4" >
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"
                             Springiness="27"
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="EllipseFiniteKnob" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="420" Duration="00:00:4">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"
                             Springiness="27"
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>


    <Storyboard x:Key="EllipseIniteShadow" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="0" Duration="00:00:4" >
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"
                             Springiness="27"
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="EllipseFiniteShadow" Storyboard.TargetProperty="(Canvas.Left)">
        <DoubleAnimation To="405" Duration="00:00:4" Storyboard.TargetName="CircleShadow">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"
                             Springiness="27"
                             EasingMode="EaseOut">
                </ElasticEase>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

<Canvas>
            <Rectangle x:Name="ToggleSwitch" Width="665" Height="260" Style="{StaticResource BaseButton}"   ></Rectangle>
            <Label     x:Name="SwitchLables"                          Style="{StaticResource SwitchLabel}"
                       Canvas.Left="322" Canvas.Top="88"                                                    >SWITCH</Label>
            <Ellipse   x:Name="CircleShadow" Width="260" Height="260"  Fill="{StaticResource CircleBehind}"
                       Opacity="0.7"

                       MouseMove="CircleKnob_MouseMove"
                       >
            </Ellipse>
            <Ellipse   x:Name="CircleKnob" Width="230" Height="230"  Style="{StaticResource EllipseEffect}"
                       Fill="{StaticResource Circle}"
                       Canvas.Left="14" Canvas.Top="15"

                       MouseDown="CircleKnob_MouseDown"
                       MouseMove="CircleKnob_MouseMove"
                       MouseUp  ="CircleKnob_MouseUp"   >
                <Ellipse.BitmapEffect>
                    <DropShadowBitmapEffect Direction="270" ShadowDepth="7" Opacity="0.5" Softness="1"     ></DropShadowBitmapEffect>
                </Ellipse.BitmapEffect>
            </Ellipse>
        </Canvas>

public partial class Switcher : Window
    {
        public Switcher()
        {
            InitializeComponent();
        }

        bool Action = false;
        double   InitPxls = 15;
        double FinitePxls = 420;
        double Movement;
        Point Point;

        private void CircleKnob_MouseDown(object sender, MouseButtonEventArgs e)
        {
            Action = true;
            Point = Mouse.GetPosition(CircleKnob);
            Mouse.Capture(CircleKnob);
        }

        private void CircleKnob_MouseMove(object sender, MouseEventArgs e)
        {
            if (Action)
            {
                Movement = Canvas.GetLeft(CircleKnob) + Mouse.GetPosition(CircleKnob).X - Point.X;

                if (Movement > InitPxls && Movement < FinitePxls) {
                    Canvas.SetLeft(CircleKnob,   Movement);
                    Canvas.SetLeft(CircleShadow, Movement - 15);
                }
            }
        }

        private void CircleKnob_MouseUp(object sender, MouseButtonEventArgs e)
        {
            Action = false;
            Mouse.Capture(null);

            Storyboard  ToInite = this.FindResource ("EllipseIniteKnob") as Storyboard;
            Storyboard ToFinite = this.FindResource("EllipseFiniteKnob") as Storyboard;


            Storyboard  ToIniteShadow = this.FindResource ("EllipseIniteShadow") as Storyboard;
            Storyboard ToFiniteShadow = this.FindResource("EllipseFiniteShadow") as Storyboard;

            if (Movement < InitPxls + 210)
            {

                //Canvas.SetLeft(CircleKnob, InitPxls);
                //Canvas.SetLeft(CircleShadow, InitPxls - 15);

                if (ToInite != null)
                {
                    CircleKnob.  BeginStoryboard(ToInite);
                    CircleShadow.BeginStoryboard(ToIniteShadow);
                }
            }
            else
            {

                //Canvas.SetLeft(CircleKnob, FinitePxls);
                //Canvas.SetLeft(CircleShadow, FinitePxls - 15);

                if (ToFinite != null)
                {
                    CircleKnob.  BeginStoryboard(ToFinite);
                    CircleShadow.BeginStoryboard(ToFiniteShadow);
                }
            }
        }
    }

There is a circle that has events to move along the X axis.

If the circle is not brought to the end of one of the final coordinates - the condition if -> it moves to the end.

BUT! Because it happens abruptly. I decided to add the animation.

Tryed to add animation, but now the animation of movement by user doesnt show. How to fix it?