diff --git a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/razor b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/razor
index c2b8549ded..2cb00a4a98 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/razor
+++ b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/razor
@@ -8,11 +8,5 @@
     .custom-connector .e-timeline-item.e-connector::after {
         border-color: #f7c867;
         border-width: 1.4px;
-        animation: progress 2s;
-    }
-
-    @@keyframes progress {
-        from { height: 0%; }
-        to { height: 100%; }
     }
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/tagHelper b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/tagHelper
index ce54581195..f8ddb123a6 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/tagHelper
@@ -14,11 +14,5 @@
     .custom-connector .e-timeline-item.e-connector::after {
         border-color: #f7c867;
         border-width: 1.4px;
-        animation: progress 2s;
-    }
-
-    @@keyframes progress {
-        from { height: 0%; }
-        to { height: 100%; }
     }
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/razor b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/razor
index 8db9623a67..1fe3ac9296 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/razor
+++ b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/razor
@@ -7,15 +7,8 @@
 <style>
     .custom-connector .state-initial.e-connector::after {
         border: 1.5px #f8c050 dashed;
-        animation: progress 1.5s ease-in-out;
     }
     .custom-connector .state-intermediate.e-connector::after {
         border: 1.5px #4d85f5 dashed;
-        animation: progress 1.5s ease-in-out;
-    }
-
-    @@keyframes progress {
-        from { height: 0%; }
-        to { height: 100%; }
     }
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/tagHelper b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/tagHelper
index aaa267571c..04fb565b28 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/tagHelper
@@ -13,15 +13,8 @@
 <style>
     .custom-connector .e-timeline-item.state-initial.e-connector::after {
         border: 1.5px #f8c050 dashed;
-        animation: progress 1.5s ease-in-out;
     }
     .custom-connector .e-timeline-item.state-intermediate.e-connector::after {
         border: 1.5px #4d85f5 dashed;
-        animation: progress 1.5s ease-in-out;
-    }
-
-    @@keyframes progress {
-        from { height: 0%; }
-        to { height: 100%; }
     }
 </style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/timeline/customization.md b/ej2-asp-core-mvc/timeline/customization.md
index 7bffb36e21..6b9179e794 100644
--- a/ej2-asp-core-mvc/timeline/customization.md
+++ b/ej2-asp-core-mvc/timeline/customization.md
@@ -41,7 +41,7 @@ You can define the styles applicable to the all the Timeline item connectors.
 {% endtabs %}
 {% endif %}
 
-![Common styling](images/connector-common.gif)
+![Common styling](images/connector-common.png)
 
 ### Individual styling
 
@@ -70,7 +70,7 @@ You can also apply unique styles to individual connectors, to differentiate spec
 {% endtabs %}
 {% endif %}
 
-![Individual styling](images/connector-individual.gif)
+![Individual styling](images/connector-individual.png)
 
 ## Dot styling
 
diff --git a/ej2-asp-core-mvc/timeline/images/connector-common.gif b/ej2-asp-core-mvc/timeline/images/connector-common.gif
deleted file mode 100644
index 572e23fc4b..0000000000
Binary files a/ej2-asp-core-mvc/timeline/images/connector-common.gif and /dev/null differ
diff --git a/ej2-asp-core-mvc/timeline/images/connector-common.png b/ej2-asp-core-mvc/timeline/images/connector-common.png
new file mode 100644
index 0000000000..7dfe7583a2
Binary files /dev/null and b/ej2-asp-core-mvc/timeline/images/connector-common.png differ
diff --git a/ej2-asp-core-mvc/timeline/images/connector-individual.gif b/ej2-asp-core-mvc/timeline/images/connector-individual.gif
deleted file mode 100644
index 7b2d96288c..0000000000
Binary files a/ej2-asp-core-mvc/timeline/images/connector-individual.gif and /dev/null differ
diff --git a/ej2-asp-core-mvc/timeline/images/connector-individual.png b/ej2-asp-core-mvc/timeline/images/connector-individual.png
new file mode 100644
index 0000000000..2c97c2333c
Binary files /dev/null and b/ej2-asp-core-mvc/timeline/images/connector-individual.png differ