In a recent project I did, I wanted to beef up the design & interactivity of the menu that opens in a modal window. Because this menu overlays the entire screen, I did not want to simply have a white (or colored) background, which is why I decided to have an animation play out each time the menu window opens.
In this article I’ll show you how to start the CSS3 animation each time a Bootstrap modal window opens / closes.
Before committing to writing code, I’ll show you the end product:
So, we have a couple of components here to observe:
- Hamburger menu icon that triggers the opening of the modal window with the menu
- A modal menu window
- A CSS3 animation that plays out on each modal window open
The entire HTML/PHP code for the modal window looks like this:
<button id="hamburger" type="button" data-toggle="modal" data-target="#navModal" data-backdrop="static">
<span class="line first"></span>
<span class="line second"></span>
<span class="line third"></span>
<span class="line fourth"></span>
</button>
<div class="modal fade" id="navModal" tabindex="-1" role="dialog" aria-labelledby="navModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="navMain">
<nav class="nav-primary">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']);
endif;
?>
</nav>
</div><!--/.navMain-->
</div>
</div>
</div>
</div>
<div class="ripple-background">
<div class="circle xxlarge shade1"></div>
<div class="circle xlarge shade2"></div>
<div class="circle large shade3"></div>
<div class="circle mediun shade4"></div>
<div class="circle small shade5"></div>
</div>So, first things first, we need to make sure our hamburger opens the modal window. We do this by using data attributes on the hamburger HTML element, which Bootstrap has kindly provided us with:
<button id="hamburger" type="button" data-toggle="modal" data-target="#navModal" data-backdrop="static" class="">
<span class="line first"></span>
<span class="line second"></span>
<span class="line third"></span>
<span class="line fourth"></span>
</button>So, we are using data-toggle=”modal” to enable our element to interact with the modal window, and we use data-target=”#navModal” to target our specific modal window. We also use data-backdrop=”static” so that our window does not close on a click off our window.
In order to animate our hamburger on modal window open / close, we first add some javascript:
$('#navModal').on('hide.bs.modal', function () {
$(this).toggleClass('show');
});We’re using the ‘hide.bs.modal’ event provided by Bootstrap’s API. This event is fired immediately when the modal windows starts closing which fits perfectly into my scenario.
So, we’re basically toggling the “show” class when we click on the hamburger, and open/close our modal window. The hamburger animation is done with some CSS3 magic:
#hamburger {
&.show {
span.line.second, span.line.third {
opacity: 0;
visibility: hidden;
}
span.line.first{
-moz-transform: rotate(45deg) translateX(6px) translateY(4px);
-webkit-transform: rotate(45deg) translateX(6px) translateY(4px);
-o-transform: rotate(45deg) translateX(6px) translateY(4px);
-ms-transform: rotate(45deg) translateX(6px) translateY(4px);
transform: rotate(45deg) translateX(6px) translateY(4px);
}
span.line.fourth{
-moz-transform: rotate(-45deg) translateX(10px) translateY(-9px);
-webkit-transform: rotate(-45deg) translateX(10px) translateY(-9px);
-o-transform: rotate(-45deg) translateX(10px) translateY(-9px);
-ms-transform: rotate(-45deg) translateX(10px) translateY(-9px);
transform: rotate(-45deg) translateX(10px) translateY(-9px);
}
}
} So, we’re basically hiding the second and fourth lines, and transforming the first and the third.
Now, for those of you watching carefully, there is a part of code missing – the one that triggers the animation class for the hamburger when it is initially clicked. I deliberately left it out, because at the same time I’m toggling the ‘show’ class for the hamburger, I’m also checking for a few things for the modal window background. Let’s take a look:
$('#hamburger').click(function() {
$(this).toggleClass('show');
if($('.ripple-background').hasClass('show')) {
$('.ripple-background').removeClass('show');
}
});So, when I’m clicking on the hamburger, I’m toggling it’s ‘show’ class, but I’m also checking to see whether my animation is played out or not. This is because I want to always trigger the animation when the hamburger is clicked, which works this way, because by removing/adding ‘show’ class to the animation, I am basically toggling its state.
But, the most important thing is to start the animation on our modal window open, and for this it’s best to use the provided ‘show.bs.modal’ event provided by Bootstrap’s API:
$('#navModal').on('show.bs.modal', function (e) {
$('.ripple-background').addClass('show');
});When we have this sorted out, all that is left, is to write some CSS to style the background and the circles, and actually make the animation work. This is the code:
@keyframes ripple{
0%{
transform: scale(0.5);
}
100%{
transform: scale(1.2);
}
}
.ripple-background {
height: 0;
position: fixed;
bottom: 0;
left: 0;
width:100%;
background-color: gold;
z-index: 10;
&.show{
height: 100vh;
.circle{
position: absolute;
border-radius: 50%;
background: white;
animation: ripple 1s;
animation-fill-mode: forwards;
box-shadow: 0px 0px 1px 0px #508fb9;
}
} /*&.show*/
}
.small{
width: 200px;
height: 200px;
left: -100px;
bottom: -100px;
}
.medium{
width: 400px;
height: 400px;
left: -200px;
bottom: -200px;
}
.large{
width: 600px;
height: 600px;
left: -300px;
bottom: -300px;
}
.xlarge{
width: 800px;
height: 800px;
left: -400px;
bottom: -400px;
}
.xxlarge{
width: 1000px;
height: 1000px;
left: -500px;
bottom: -500px;
}
.shade1{
opacity: 0.2;
}
.shade2{
opacity: 0.5;
}
.shade3{
opacity: 0.7;
}
.shade4{
opacity: 0.8;
}
.shade5{
opacity: 0.9;
}
