<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/balapa/pen/obpLeJ?depth=everything&limit=all&order=popularity&page=9&q=modal&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">html,
body {
display: table;
width: 100%;
height: 100%;
background: #005C97;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #005C97, #363795);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #005C97, #363795);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.main-ctr {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#element {
fill: white;
}
#step-0,
#step-1,
#step-2,
#step-3 {
opacity: 0;
}
#modal-with-genie-effect #close {
cursor: pointer;
position: relative;
transition: .3s all ease;
opacity: 1;
}
#modal-with-genie-effect #word {
transition: .3s all ease;
opacity: 1;
position: relative;
}
#modal-with-genie-effect.active #close {
opacity: 0;
pointer-events: none;
transition: .3s all ease .15s;
}
#modal-with-genie-effect.active #word {
opacity: 0;
transition: .3s all ease .3s;
}
#open-modal-ctr {
opacity: 0;
pointer-events: none;
cursor: pointer;
transition: .3s all ease;
}
#open-modal-ctr.active {
opacity: 1;
transition: .3s all ease .1s;
pointer-events: auto;
}
</style></head><body>
<div class="main-ctr">
<svg xmlns="http://www.w3.org/2000/svg" width="540" height="620" viewBox="0 0 540 620">
<g id="Page-1" fill="none" fill-rule="evenodd">
<g id="modal-with-genie-effect">
<path id="step-3" stroke="#979797" d="M186 561.005c0-2.764 2.234-5.005 4.998-5.005h157.004c2.76 0 4.998 2.242 4.998 5.005v33.99c0 2.764-2.234 5.005-4.998 5.005H190.998c-2.76 0-4.998-2.242-4.998-5.005v-33.99z" opacity=".504"/>
<path id="step-2" stroke="#979797" d="M270.136 122h237.356c2.758 0 4.36 2.15 3.577 4.8 0 0-23.333 86.246-92.842 174.822-69.51 88.575-66.458 185.37-66.458 185.37-.033 2.776-2.25 5.008-5.01 5.008H193.51c-2.76 0-4.977-2.232-5.01-5.008 0 0 3.05-96.795-66.458-185.37C52.534 213.046 29.202 126.8 29.202 126.8c-.783-2.65.82-4.8 3.578-4.8h237.356z" opacity=".5"/>
<path id="step-0" stroke="#979797" d="M20 26.003C20 23.24 22.23 21 25.01 21h489.98c2.767 0 5.01 2.242 5.01 5.003v289.994c0 2.763-2.23 5.003-5.01 5.003H25.01c-2.767 0-5.01-2.242-5.01-5.003V26.003z"/>
<path id="element" fill="#FFF" d="M20 26.003C20 23.24 22.23 21 25.01 21h489.98c2.767 0 5.01 2.242 5.01 5.003v289.994c0 2.763-2.23 5.003-5.01 5.003H25.01c-2.767 0-5.01-2.242-5.01-5.003V26.003z"/>
<g id="open-modal-ctr">
<path id="open-modal-btn" fill="#FFF" d="M186 561.005c0-2.764 2.234-5.005 4.998-5.005h157.004c2.76 0 4.998 2.242 4.998 5.005v33.99c0 2.764-2.234 5.005-4.998 5.005H190.998c-2.76 0-4.998-2.242-4.998-5.005v-33.99z"/>
<text id="text" fill="#7E7878" font-family="Roboto" font-size="16" font-weight="260" transform="translate(185 556)">
<tspan x="41.797" y="27">Open Modal</tspan>
</text>
</g>
<g id="word" font-family="Roboto">
<text id="title" fill="#434343" font-size="20" transform="translate(20 124)">
<tspan x="93.713" y="19">Modal Interaction with Genie Effect</tspan>
</text>
<text id="paragraf" fill="#7E7878" font-size="16" font-weight="260" transform="translate(20 124)">
<tspan x="100.457" y="59">Inspired by Mac OS X minimize interaction.</tspan> <tspan x="120.609" y="84">Built with SVG and Greensock Plugin.</tspan>
</text>
</g>
<g id="close" transform="translate(486 36)">
<circle id="bg" cx="10" cy="10" r="10" fill="#E9413D"/>
<path id="Shape" stroke="#FFF" d="M6 6.023l7.99 7.945M13.99 6.023L6 13.968" stroke-linecap="round"/>
</g>
</g>
</g>
</svg>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script><script src='https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js'></script>
<script >var element = document.querySelector("#element"),
wrapper = document.querySelector("#modal-with-genie-effect"),
close = document.querySelector("#close"),
word = document.querySelector("#word"),
open = document.querySelector("#open-modal-ctr"),
step0 = "#step-0",
step2 = "#step-2",
step3 = "#step-3";
var tl = new TimelineMax();
close.addEventListener("click", function(){
wrapper.classList.add("active");
tl
.to(element, .3, {
delay: .7,
y: "-15px",
scaleY: .9
})
.to(element, .3, {
morphSVG: step2
})
.to(element, .3, {
morphSVG: step3,
}, "-=.15")
.to(element, .3, {
y: "0",
scaleY: 1,
onComplete: function(){
open.classList.add("active");
}
}, "-=.15")
});
open.addEventListener("click", function(){
this.classList.remove("active");
tl
.to(element, .3, {
delay: .45,
y: "10px",
})
.to(element, .3, {
morphSVG: step2,
})
.to(element, .3, {
morphSVG: step0
}, "-=.15")
.to(element, .3, {
y: "0",
onComplete: function(){
wrapper.classList.remove("active");
}
}, "-=.3")
});
// copy
balapaCop("Modal Interaction with Genie Effect", "rgba(255,255,255,.5)");
//# sourceURL=pen.js
</script>
</body></html>
