Animating Pop-up Transitions in JavaScript with Wijmo

When displaying a Pop-up control, developers may want to add some styling and animations to the Pop-up control instead of merely dimming the background and having the Pop-up only show up on-screen. Wijmo’s Pop-up control makes it extremely easy to add your custom CSS animations to modify how your Pop-up control appears.

In this blog, we will outline the steps to create a Wijmo Pop-up control, the CSS, and the events that will add and remove our control; animating it in the process.

Wijmo offers the fastest, most flexible JavaScript DataGrid, with features such as sorting, grouping, searching, Excel-like filtering, DataMaps, custom CellTemplates, sparklines, rich editing, Excel/PDF export, validation, DetailsRows, and more.

How to Import the Required Modules

Before we can create our Pop-up control, we’ll need to import the required Wijmo files into our JavaScript file:

import ‘@grapecity/wijmo.styles/wijmo.css’;
import * as wijmo from ‘@grapecity/wijmo’;
import * as input from ‘@grapecity/wijmo.input’;

This will import Wijmo’s main JavaScript module and the input module. It also includes Wijmo’s CSS file so that our control styles correctly.

Creating Our Pop-up Control

Next, we’ll need to create our Pop-up control. There will be two components to this; our Pop-up control in JavaScript, and the HTML element that we will tie our pop-up control to:

<form id=”frmLogin” class=”custom-animation”>
  <!-- Popup Form -->
</form>

This form will serve as our Pop-up control, with inputs and buttons located inside of the form. Now, we’ll use JavaScript to connect a Wijmo Pop-up to that form:

let login = new input.Popup(‘#frmLogin’, {  
  fadeIn: false,  
  shown: (sender) => {  
    wijmo.toggleClass(sender.hostElement, ‘custom-animation-visible', true);  
  },  
  hide: (sender) => {  
    wijmo.toggleClass(sender.hostElement, ‘custom-animation-visible', false);  
  }  
});

This code will create a Pop-up control that will call methods when it is both shown and hidden. When shown, we apply a CSS class named "custom-animation-visible", and when it is hidden, we remove that class from it.

Animating Our Pop-up Control

We can now create our CSS classes that will animate the Pop-up when it is shown/hidden:

.custom-animation {  
  opacity: 0;  
  transform: rotate3d(1, .5, .5, 180deg) scale(0,1);  
  transition: all ease-in .4s;  
}  
.custom-animation-visible {  
  opacity: 1;  
  transform: none;  
}

The "custom-animation-visible" class indicates the show/hide the element, and the "custom-animations" class does the actual work when it comes to animating the Pop-up control. Transform outlines how the component will be animated, rotating on a 3D axis and scaling the control up to the appropriate size.

Transition sets the parameters which define how our element changes, updating values over a given set of time. In the case of our transition, we’re telling our program that we want our animation to start slow and speed up as it animates, and we want it to finish displaying after.

You can see how the Pop-up looks when it is displayed below:

You can check this sample out live here.