Post
Ask Question

Kendo Window Animation

Introduction

In this blog you will learn how to handle the kendo window animation with different events using JQuery.

Kendo Window Animation

Animation object in kendo window is used to change the default animations, when we set to false it will disable the default animation.

<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo Window</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="dialog">
        Hello I'm Kendo Widow
    </div>
    <script>
$("#dialog").kendoWindow({
  animation: false
});
    </script>
</body>
</html>

You can also turn on the animation effects when the kendo window opens and close. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo Window</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="dialog">
  Hello I'm Kendo Widow
</div>
<script>
$("#dialog").kendoWindow({
  animation: {
    open: {
      effects: "fade:in"
    }
  },
  visible: false
});
  
$("#dialog").data("kendoWindow").open();
</script>
</body>
</html>

Set visible to false and trigger the kendo window open function to observe the kendo window open animation effect 

Adding fade-out animation while closing the kendo window. 

close: {
  effects: "fade:out"
}

Note - animation: true is not a valid configuration 

Conclusion

We have seen how to manage the animation effect for kendo window. You can explore more about kendo animation here. 

Happy Coding !!!

Click here to get the source code.