Animated jQuery Swing Out Modal

by Posted on

Here I am going to share awesome animated jquery modal popup on button click. You can use these types of modal to display any notification alerts which notify to your visitor for some important message / notification about your website. Modals are a great way to give your user access to additional or supporting information without taking up extra space on the page. This swing out modal is animated with SASS, with a little jQuery to help out with clicked states. I really found this popup modal cool with some unique animation. whenever visitor click on button it’ll open a animated popup window with message.
Animated jQuery Swing Out Modal

Library

The script dependent on jquery core library so include it first.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

HTML

Create html container including a button which you’ll click and modal will display with some cool animation which design via CSS and jQuery.

 <div class="wrapper">
  <div class="container">
    <div class="btn open">
            Click Me!
        </div>
        <div class="circle"></div>
        <div class="modal">
            <div class="modal-container">
                <div class="title">
                    The More You Know
                    <i class="fa fa-times close"></i>
                </div>
                <div class="copy">
                    Modals are a great way to give your user access to additional or supporting information without taking up extra space on the page. This swing out modal is animated with SASS, with a little jQuery to help out with clicked states.
                </div>
                <div class="btn close">
                    Continue
                </div>
            </div>
        </div>
    </div>
</div>


CSS

In css you’ll see developer has uses CSS3 keyframes to design modal animation.

@import "bourbon";
 
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
 
$bg: #1e1e1e;
$modal:#ECECEC;
$modal-accent: #4E9CFF;
$open: #F47265;
$open-shadow: #e84d3e;
 
%center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
 
//Base
* {box-sizing: border-box;}
 
html, body {
    height: 100%;
    width: 100%;
    background: $bg;
    overflow:hidden;
}
 
body {
  font-family: 'Varela Round', sans-serif;
}
 
//open
.btn.open {
    @extend %center;
    color: whitesmoke;
    width: 250px;
    height: 70px;
    background: $open;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 22px 0;
    border-radius: 3px;
    box-shadow: 0 8px 0 0 $open-shadow;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 5;
 
    &:hover {
        box-shadow: 0 5px 0 0 darken($open-shadow, 2%);
        margin-top: 3px;
    }
 
    &:active {
        box-shadow: 0 0 0 0 darken($open-shadow, 6%);
        margin-top: 8px;        
    }
 
}
 
.circle {
    border-radius: 100%;
    height: 2px;
    width: 2px;
    background: $open;
    opacity: .3;
    @extend %center;
    z-index: 2;
    transition: all .8s ease;
}
 
//Modal 
.modal {
    @extend %center;
    //height: 250px;
    //width: 550px;
    background: $modal;
    border-radius: 3px;
    box-shadow: 0 8px 0 0 darken($modal, 18%);
    padding: 0;
 
    .title {
        color: $modal-accent;
        //float: left;
        font-size: 28px;
        font-weight: bold;
        margin-top: -5px;
        padding: 10px 15px 10px 20px;
        border-bottom: 5px solid $modal-accent;
        margin: -15px -20px 12px;
 
        i {
            float: right;
            color: $bg;
            opacity: .3;
            transition: all .2s ease;
            cursor: pointer;
 
            &:hover {
                opacity: .5;
            }
        }
    }
 
    .copy {
        float: none;
        clear: both;
        font-size: 16px;
    }
 
    .copy {
        line-height: 1.3;
    }
 
    .btn.close {
        @extend .btn.open;
        top: 78%;
        height: 50px;
        padding: 15.5px;
        font-size: 24px;
        background: lighten($modal-accent, 6%);
        box-shadow: 0 8px 0 0 $modal-accent;
        cursor: pointer;
        transition: all .3s ease;
 
        &:hover {
            box-shadow: 0 5px 0 0 darken($modal-accent, 2%);
            margin-top: 3px;
        }
 
        &:active {
            box-shadow: 0 0 0 0 darken($modal-accent, 6%);
            margin-top: 8px;        
        }
    }
}
 
.modal-container {
    display: none;
}
 
.in {
    animation: in 1s ease;
}
 
.out {
    animation: out 1s ease;
}
 
@keyframes in {
    0% {
        height: 0;
        width: 0;
        z-index: 0;
    }
 
    30% {
        top: 20%;
        z-index: 0;
    }
 
    60% {
        z-index: 1000;
    }
 
    100% {
        top: 50%;
        z-index: 1000;
        height: 250px;
      width: 550px;
    }
}
 
@keyframes out {
    0% {
        top: 50%;
        z-index: 1000;
        height: 250px;
      width: 550px;
    }
 
    30% {
        top: 80%;
        z-index: 1000;
        padding: 0;
    }
 
    60% {
        z-index: 0;     
 
    }
 
    90%, 100% {
        height: 0;
        width: 0;
        z-index: 0;
    }
}
 
.circle-active {
    height: 700px;
    width: 700px;
    opacity: 0;
}
 
.circle-hide {
    opacity: 0!important;
}


JS

Finally add jquery on page and set open and close popup modal animation and buttons.

$( ".open" ).click(function() {
    $(".modal").removeClass("out");
    $(".modal").addClass("in");
    setTimeout(function() {
    $(".modal").css("z-index", "1000");
        $(".modal").css("height", "250px");
        $(".modal").css("width", "550px");
        $(".modal").css("padding", "20px");
    }, 700);
    setTimeout(function() {
        $(".modal-container").fadeIn("slow");
    }, 900);
    $(".circle").addClass("circle-active");
    setTimeout(function() {
        $(".circle").removeClass("circle-active");
        $(".circle").addClass("circle-hide");
    }, 800);
});
 
$( ".close" ).click(function() {
    $(".modal-container").fadeOut("fast");
    $(".circle").removeClass("circle-hide");
    setTimeout(function() {
        $(".modal").removeClass("in");
        $(".modal").addClass("out");
    }, 150);
    setTimeout(function() {
    $(".modal").css("z-index", "0");
        $(".modal").css("height", "0");
        $(".modal").css("width", "0");
        $(".modal").css("padding", "0");
    }, 150);
});

See live demo and download source code.

DEMO

This awesome script developed by MichaelRyanSmith, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin