March 17, 2022

Adding Reveal Animations to Modals in Zion Builder

David Browne

Inside the library, there are now quite a few pre-designed layouts specifically for Zion Builder’s modal element. In this tutorial, we’ll look at how to animate the modal when it is revealed and closed.

By default, the modal will just appear when it’s first revealed and disappear instantly when it’s closed. We can add some styles to make sure the fade in/out is a little smoother and also add some transforms to make it appear to slide in from either direction.

Note – since writing, we created a new element ‘Pro Modal‘ with both reveal and hide animations built in as options.

CSS for the Animation

First, we need to add some CSS to the modal, to change the default behaviour and make the reveal animation possible.

Go to Modal > Advanced > Custom CSS and add..

[ELEMENT]:not(.zb-modal--inline) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

[ELEMENT] .zb-modalContent {
  transition-duration: inherit;
  will-change: transform;
}

[ELEMENT].zb-modal--open  .zb-modalContent {
    transform: none;
}

This will ensure that the position of the overall element wrapper remains static and the only thing that will animate is the opacity and visibility.

Now we can add our own animation on the modal content itself, which is what creates the reveal effect.

Creating a reveal effect

There are two things we need to control. The starting position of the modal content when it’s hidden, so it can slide or scale into it’s position when it’s revealed (for this we’ll use transforms). The second thing is the transition duration, which will control the speed.

To change the starting position

Go to Modal > Styling > Modal Content Styles > Transform.

The transform you add here will control how the element is positioned when it is hidden. For example, if you set the transform Y to 20px and add a scale of 0.9. It means the modal will start 10% smaller and be positioned 20px down. When it is revealed it will move up 20px and grow to the full scale.