Animating Wijmo Controls

Animations can make web applications more attractive and intuitive. For example, removing an item from the page by making it shrink away lets the user see which item is being removed more easily that if it was simply hidden.

Many JavaScript toolkits and frameworks have their own wrappers for creating animations. For example, Angular has an $animate service, and jQuery has an animate() method. If you have a favorite you can use that with Wijmo.

If you want to reduce dependencies on external toolkits and frameworks, you can use Wijmo's simple and flexible animation wrapper function.

wijmo.animate

The wijmo.animate method, takes a function as an argument that defines the animation behavior.

The sample code below animates the rotation of a FlexGrid for 2 seconds.

wijmo.animate((pct) => {
    
    let xform = '';
    if (pct < 1) {
        if (pct > 0.5)
            pct = pct - 1;
        xform = 'rotateY( ' + (pct * 180) + 'deg)';
    }
    
    theGrid.hostElement.style.transform = xform;
}, 2000);

To see this code in action, visit the Animate Demo.