animation Boolean|Object

A collection of {Animation} objects, used to change default animations. A value of false will disable all animations in the widget.

animation:true is not a valid configuration.

Example - disable animation

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: false
});
</script>

animation.close Object

The animation that will be used when a Dialog closes.

Example - disable close animation

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: {
    close: false
  }
});
</script>

animation.close.effects String

Effect to be used for closing of the popup.

Example - use only fade out animation when closing dialog

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: {
    close: {
      effects: "fade:out"
    }
  }
});
</script>

animation.close.duration Number

Defines the close animation duration.

Example - make the close animation 2 seconds long

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: {
    close: {
      duration: 2000
    }
  }
});
</script>

animation.open Object

The animation that will be used when a Dialog opens.

Example - disable open animation

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: {
    open: false
  },
  visible: false
});
$("#dialog").data("kendoDialog").open();
</script>

animation.open.effects String

Effect to be used for opening of the popup.

Example - use only fade animation when opening dialog

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: {
    open: {
      effects: "fade:in"
    }
  },
  visible: false
});
$("#dialog").data("kendoDialog").open();
</script>

animation.open.duration Number

Defines the open animation duration.

Example - make the open animation 100 milliseconds long

<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
  title: "Kendo Dialog Component",
  content: "This is your Kendo Dialog.",
  animation: {
    open: {
      duration: 100
    }
  },
  visible: false
});
$("#dialog").data("kendoDialog").open();
</script>