No motion animation of objects

<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" >SWITCHLabel>
<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?