animation

The animation object specifies the widget animation options.

Type: Object

This object is passed to the show and hide properties of an object passed to the animation configuration option of a widget that overlays the main screen (dxLoadPanel, dxOverlay, dxPopup, dxPopover, and dxToast).

JavaScript
var hideAnimation = {...};
var showAnimation = {...};

dxOverlayOptions = {
    animation: {
        show: showAnimation,
        hide: hideAnimation
    },
    . . .
};

complete

A function called after animation is completed.

Type: function
Function parameters:
$element: jQuery
The animated object.
config: Object
The animation configuration object.

delay

A number specifying wait time before animation execution.

Type: Number

duration

A number specifying the time in milliseconds spent on animation.

Type: Number

easing

A string specifying the type of an easing function used for animation.

Type: String

DevExtreme supports predefined jQuery easing ("linear" and "swing") and CSS transition timing functions ("linear", "ease", "ease-in", "ease-out", "ease-in-out", "cubic-besier(0,1,1,0)", etc.). For more information on CSS transition timing functions, see CSS3 transition-timing-function Property. You can also register a custom easing function using jQuery and pass its name to the easing option.

JavaScript
$.easing.myEasing = function(t, millisecondsSince, startValue, endValue, totalDuration) {
    if(t<0.5) {
        return t*4;
    } else {
        return -2*t + 3;
    }
};
animationOptions = {
    show: {
        duration: 2000,
        type: "slide",
        from: { left: -300 },
        easing: "myEasing"
    }
};

from

Specifies the initial widget animation state.

Type: Number|Object

The option can take on the following values, depending on the animation type.

  • fade
    The from option takes on a numeric value from 0 to 1, which specifies the initial widget opacity.

    JavaScript
    from: 0.1
  • pop
    The option can take on an object containing the scale and opacity properties, which specify the initial widget scale and opacity, respectively. Each property can take on a numeric value of 0 to 1.

    JavaScript
    from: {
        scale: 0.2,
        opacity: 0
    }
  • slide
    The option takes on an object containing the opacity property and properties specifying the widget position (top, left, bottom, and right).

    JavaScript
    from: {
        opacity: 0.5,
        top: -100
    }
  • custom
    The option takes on an object containing fields that correspond to the CSS properties you want to animate.

    JavaScript
    from: {
        top: -350,
        width: "10%",
        "background-color": "blue"
    }

You can specify the initial or target element position relative to the current element position. For this purpose use the += or -= operators.

JavaScript
from: {
    top: "-=300",
}
to: {
    top: "+=200",
}

start

A function called before animation is started.

Type: function
Function parameters:
$element: jQuery
The animated object.
config: Object
The animation configuration object.

to

Specifies the initial widget animation state.

Type: Number|Object

The current option can take on the following values, depending on the animation type.

  • fade - The to option takes on a numeric value of 0 to 1, which specifies target widget opacity.

    JavaScript
    to: 1
  • pop - The option can take on an object containing the scale and opacity properties, which specify the target widget scale and opacity, respectively. Each property can take on a numeric value of 0 to 1.

    JavaScript
    to: {
        scale: 1,
        opacity: 1
    }
  • slide The option takes on an object containing the opacity property and properties specifying the widget position (top, left, bottom and right).

    JavaScript
    to: {
        opacity: 1,
        top: 0
    }
  • custom The option takes on an object containing fields that correspond to the CSS properties you want to animate.

    JavaScript
    from: {
        top: 50,
        width: "80%",
        "background-color": "yellow"
    }

You can specify the initial or target element position relative to the current element position. For this purpose, use the += or -= operators.

JavaScript
from: {
    top: "-=300",
}
to: {
    top: "+=200",
}

type

A string value specifying the animation type.

Type: String
Accepted Values: 'fade'|'pop'|'slide'

The value of the option affects the widget's initial and target states, which are specified via the from and to options.

The type options can take on the following values.

  • "fade" - animates the widget opacity
  • "pop" - animates the widget scale
  • "slide" - animates the widget position
  • "Custom" - animates the widget from an initial state specified by the from option to a target state specified by the to option.