CodeMyUI/SVG popup with gsap js.markdown

## index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

<body>
  <div class="sign">Simple popup animete effect with <a href="http://greensock.com/" target="blank">GSAP JS</a></div>
  <div class="black">
    <div id="menu" class="menu-c">
      <span></span>
    </div>

    <div id="morph-shape">
      <svg viewBox="0 0 300 500">
        <g id="animgroup">
          <path id="state1" d="M277,480h-36.4c-1.6,0-3-1.4-3-3v-36.4c0-1.7,1.4-3,3-3H277c1.6,0,3,1.3,3,3V477C280,478.6,278.6,480,277,480z" />
          <path id="state2" d="M250,381.9v-12.4c0-17.4-13.6-31.5-31.1-31.5h-21c-17.4,0-32,14.1-32,31.5v21c0,12.8,7.2,24.7,18.7,29.2
					c41.9,16.3,55.8,60.4,57.5,60.4h35.3c2,0,2.5-2.4,2.5-4.4v-35.3C280,438.6,250,412.4,250,381.9z" />
          <path id="state3" d="M325.1,223.8c0,61-30.9,114.9-78,146.6c-28.2,19.1-62.2,30.2-98.9,30.2c-97.7,0-176.8-79.2-176.8-176.8S50.7,47,148.3,47S325.1,126.2,325.1,223.8z" />
        </g>

        <g id="linegroup" x="200" y="600">
          <path fill="#F2F2F2" d="M213,328H89c-2.8,0-5-2.2-5-5s2.2-5,5-5h124c2.8,0,5,2.2,5,5S215.8,328,213,328z" />
          <path fill="#D6DD90" d="M188,282h-74c-2.8,0-5-2.2-5-5s2.2-5,5-5h74c2.8,0,5,2.2,5,5S190.8,282,188,282z" />
          <path fill="#F2F2F2" d="M213,237H89c-2.8,0-5-2.2-5-5s2.2-5,5-5h124c2.8,0,5,2.2,5,5S215.8,237,213,237z" />
          <path fill="#F2F2F2" d="M206,191H96c-2.8,0-5-2.2-5-5s2.2-5,5-5h110c2.8,0,5,2.2,5,5S208.8,191,206,191z" />
          <path fill="#E88E8E" d="M206,143H96c-8.3,0-15-6.7-15-15s6.7-15,15-15h110c8.3,0,15,6.7,15,15S214.3,143,206,143z" />
        </g>
      </svg>

    </div>
    <div class="bl">
      <div class="navbar">
        <div class="linenav"></div>
      </div>
      <div class="cont"></div>
      <div class="cont"></div>
      <div class="cont"></div>
      <div class="cont"></div>
    </div>
  </div>
</body>

## script.js
/*VARS*/
var button = document.getElementById("menu"),
  buttonline = document.getElementById("linegroup"),
  morph = new TimelineMax({
    paused: true
  });

/*MORF ACTION*/
morph.to("#state1", .1, {
    morphSVG: "#state2",
    ease: Sine.easeIn,
    y: 0,
    fill: "#e73f3f"
  }, "one") /* "one" is morph id*/
  .to("#state1", .3, {
    morphSVG: "#state3",
    ease: Elastic.easeOut.config(2, 0.8),
    scale: 1.3,
    x: 0,
    y: 60
  }, "two"); /* "two" is morph id*/

button.addEventListener("click", function() {
  button.classList.toggle('open');
  if (morph.progress() === 0) { //if it's at the beginning, start playing
    morph.play();
    $(".menu-c").addClass("radius");
    $("#linegroup").css({
      "opacity": "1",
      "display": "block"
    });

  } else { //otherwise toggle the direction on-the-fly
    /*    morph.reverse("#krug");*/
    morph.tweenFromTo("two", "one")
    $(".menu-c").removeClass("radius");
    $("#linegroup").css({
      "opacity": "0",
      "display": "none"
    });
  }
});

//close by bottonline//
buttonline.addEventListener("click", function() {
  button.classList.toggle('open');
  morph.tweenFromTo("two", "one");
  $(".menu-c").removeClass("radius");
  $("#linegroup").css({
    "opacity": "0",
    "display": "none"
  });
});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.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>

## style.css
/*color*/
$body: #6e8282;
$back: white;
$btn_back: #e73f3f;
$cardback: #e8ebeb;
$navbar: #57c7aa;

/*margins*/
$line-w: 25px;
$line-h: 2px;
$line-p: -6px;
$line-p2: 6px;

/*mixins*/
@mixin transform-rotate ($deg) {
	-moz-transform: rotate($deg+deg);
  -ms-transform: rotate($deg+deg);
  -webkit-transform: rotate($deg+deg);
  -o-transform: rotate($deg+deg);
	transform: rotate($deg+deg);
}

@mixin transform-translateY ($color) {
	-moz-transform: translateY($color);
  -ms-transform: translateY($color);
  -webkit-transform: translateY($color);
  -o-transform: translateY($color);
	transform: translateY($color);
}

@mixin transform-translate ($pos,$pos2) {
	-moz-transform: translate($pos,$pos2);
  -ms-transform: translate($pos,$pos2);
  -webkit-transform: translate($pos,$pos2);
  -o-transform: translate($pos,$pos2);
	transform: translate($pos,$pos2);
}

@mixin transform-scale ($val) {
	-moz-transform: scale($val);
  -ms-transform: scale($val);
  -webkit-transform: scale($val);
  -o-transform: scale($val);
	transform: scale($val);
}

@mixin transition ($val){
	-webkit-transition: ($val);
	-moz-transition: ($val);
  -ms-transition: ($val);
  -o-transition: ($val);
	transition: ($val);
}

/*content*/
.sign{
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:1.2em;
	width:150px;
	color:white;
	opacity:0.5;
	/*text-transform:uppercase;*/
}
.bl{
  z-index: -100;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
}
.navbar{
  padding:20px 0;
  background: $navbar;
  width:100%;
  height:20px;
}
.linenav{
  margin:0 auto;
  background:white;
  width:120px;
  height:20px;
  border-radius:10px;
}
.cont{
  margin:10px auto;
  background: $cardback;
  width:280px;
  height:100px;
  border-radius:6px;
}

.wip{
  position:absolute;
  padding:20px;
  font-size: 50px;
  opacity:0.2;
}

body{
	padding:40px;
  background: $body;
}

.black{
  overflow: hidden;
  position: absolute;
	width: 300px;
  height: 500px;
  top: 50%;
  left: 50%;
	@include transform-translate (-50%, -50%);
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/*menu icon*/
#menu{
  position: absolute;
  cursor: pointer;
  margin: 20px;
  width: 50px;
  height: 50px;
  right: 0;
  bottom: 0;
  background: $btn_back;
  @include transition (all 0.2s);
}
.line{
  margin: 20px auto;
  width:30px;
  height:4px;
  border-radius: 2px;
  background:black;
}
#menu > span {
  margin: 26%;
  position: absolute;
  top: 65%;
  display: block;
  width: $line-w;
  height: $line-h;
  margin-top: -0.5em;
	border-radius: 3px;
  background-color: white;
}

.menu-c > span:before,
.menu-c > span:after {
  content: "";
  position: absolute;
  width: $line-w;
  height: $line-h;
  background-color: white;
  border-radius: 3px;
  @include transition (all 0.1s);
}
.menu-c > span:before {
	@include transform-translateY ($line-p);
}

.menu-c > span:after {
	@include transform-translateY ($line-p2);
}

/* OPENED */

.menu-c.open {
	        @include transform-rotate (45);
}

.menu-c.open > span:before {
	        @include transform-rotate (90);
}

.menu-c.open > span:after {
          opacity: 0;
					@include transform-rotate (90);
}

.menu-c{
  border-radius: 5px;
}
.radius{
  border-radius: 100%;
}

/*svg content*/
#linegroup{
	cursor:pointer;
	display:none;
	opacity:0;
}
#state1{
  fill: $btn_back;
}
#state2{
  display:none;
}
#state3{
	@include transform-translate (60px,50px);
  display:none;
}

## SVG popup with gsap js.markdown

      
    Raw
  

              SVG popup with gsap js.markdown
            
          
    SVG popup with gsap js
A Pen by Pavel Laptev on CodePen.
License.
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

	<body>
	<div class="sign">Simple popup animete effect with <a href="http://greensock.com/" target="blank">GSAP JS</a></div>
	<div class="black">
	<div id="menu" class="menu-c">
	<span></span>
	</div>

	<div id="morph-shape">
	<svg viewBox="0 0 300 500">
	<g id="animgroup">
	<path id="state1" d="M277,480h-36.4c-1.6,0-3-1.4-3-3v-36.4c0-1.7,1.4-3,3-3H277c1.6,0,3,1.3,3,3V477C280,478.6,278.6,480,277,480z" />
	<path id="state2" d="M250,381.9v-12.4c0-17.4-13.6-31.5-31.1-31.5h-21c-17.4,0-32,14.1-32,31.5v21c0,12.8,7.2,24.7,18.7,29.2
	c41.9,16.3,55.8,60.4,57.5,60.4h35.3c2,0,2.5-2.4,2.5-4.4v-35.3C280,438.6,250,412.4,250,381.9z" />
	<path id="state3" d="M325.1,223.8c0,61-30.9,114.9-78,146.6c-28.2,19.1-62.2,30.2-98.9,30.2c-97.7,0-176.8-79.2-176.8-176.8S50.7,47,148.3,47S325.1,126.2,325.1,223.8z" />
	</g>

	<g id="linegroup" x="200" y="600">
	<path fill="#F2F2F2" d="M213,328H89c-2.8,0-5-2.2-5-5s2.2-5,5-5h124c2.8,0,5,2.2,5,5S215.8,328,213,328z" />
	<path fill="#D6DD90" d="M188,282h-74c-2.8,0-5-2.2-5-5s2.2-5,5-5h74c2.8,0,5,2.2,5,5S190.8,282,188,282z" />
	<path fill="#F2F2F2" d="M213,237H89c-2.8,0-5-2.2-5-5s2.2-5,5-5h124c2.8,0,5,2.2,5,5S215.8,237,213,237z" />
	<path fill="#F2F2F2" d="M206,191H96c-2.8,0-5-2.2-5-5s2.2-5,5-5h110c2.8,0,5,2.2,5,5S208.8,191,206,191z" />
	<path fill="#E88E8E" d="M206,143H96c-8.3,0-15-6.7-15-15s6.7-15,15-15h110c8.3,0,15,6.7,15,15S214.3,143,206,143z" />
	</g>
	</svg>

	</div>
	<div class="bl">
	<div class="navbar">
	<div class="linenav"></div>
	</div>
	<div class="cont"></div>
	<div class="cont"></div>
	<div class="cont"></div>
	<div class="cont"></div>
	</div>
	</div>
	</body>
	/VARS/
	var button = document.getElementById("menu"),
	buttonline = document.getElementById("linegroup"),
	morph = new TimelineMax({
	paused: true
	});

	/MORF ACTION/
	morph.to("#state1", .1, {
	morphSVG: "#state2",
	ease: Sine.easeIn,
	y: 0,
	fill: "#e73f3f"
	}, "one") /* "one" is morph id*/
	.to("#state1", .3, {
	morphSVG: "#state3",
	ease: Elastic.easeOut.config(2, 0.8),
	scale: 1.3,
	x: 0,
	y: 60
	}, "two"); /* "two" is morph id*/

	button.addEventListener("click", function() {
	button.classList.toggle('open');
	if (morph.progress() === 0) { //if it's at the beginning, start playing
	morph.play();
	$(".menu-c").addClass("radius");
	$("#linegroup").css({
	"opacity": "1",
	"display": "block"
	});

	} else { //otherwise toggle the direction on-the-fly
	/* morph.reverse("#krug");*/
	morph.tweenFromTo("two", "one")
	$(".menu-c").removeClass("radius");
	$("#linegroup").css({
	"opacity": "0",
	"display": "none"
	});
	}
	});

	//close by bottonline//
	buttonline.addEventListener("click", function() {
	button.classList.toggle('open');
	morph.tweenFromTo("two", "one");
	$(".menu-c").removeClass("radius");
	$("#linegroup").css({
	"opacity": "0",
	"display": "none"
	});
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.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>
	/color/
	$body: #6e8282;
	$back: white;
	$btn_back: #e73f3f;
	$cardback: #e8ebeb;
	$navbar: #57c7aa;

	/margins/
	$line-w: 25px;
	$line-h: 2px;
	$line-p: -6px;
	$line-p2: 6px;

	/mixins/
	@mixin transform-rotate ($deg) {
	-moz-transform: rotate($deg+deg);
	-ms-transform: rotate($deg+deg);
	-webkit-transform: rotate($deg+deg);
	-o-transform: rotate($deg+deg);
	transform: rotate($deg+deg);
	}

	@mixin transform-translateY ($color) {
	-moz-transform: translateY($color);
	-ms-transform: translateY($color);
	-webkit-transform: translateY($color);
	-o-transform: translateY($color);
	transform: translateY($color);
	}

	@mixin transform-translate ($pos,$pos2) {
	-moz-transform: translate($pos,$pos2);
	-ms-transform: translate($pos,$pos2);
	-webkit-transform: translate($pos,$pos2);
	-o-transform: translate($pos,$pos2);
	transform: translate($pos,$pos2);
	}

	@mixin transform-scale ($val) {
	-moz-transform: scale($val);
	-ms-transform: scale($val);
	-webkit-transform: scale($val);
	-o-transform: scale($val);
	transform: scale($val);
	}

	@mixin transition ($val){
	-webkit-transition: ($val);
	-moz-transition: ($val);
	-ms-transition: ($val);
	-o-transition: ($val);
	transition: ($val);
	}

	/content/
	.sign{
	font-family: 'Oswald', sans-serif;
	font-weight:300;
	font-size:1.2em;
	width:150px;
	color:white;
	opacity:0.5;
	/text-transform:uppercase;/
	}
	.bl{
	z-index: -100;
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	}
	.navbar{
	padding:20px 0;
	background: $navbar;
	width:100%;
	height:20px;
	}
	.linenav{
	margin:0 auto;
	background:white;
	width:120px;
	height:20px;
	border-radius:10px;
	}
	.cont{
	margin:10px auto;
	background: $cardback;
	width:280px;
	height:100px;
	border-radius:6px;
	}

	.wip{
	position:absolute;
	padding:20px;
	font-size: 50px;
	opacity:0.2;
	}

	body{
	padding:40px;
	background: $body;
	}

	.black{
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 500px;
	top: 50%;
	left: 50%;
	@include transform-translate (-50%, -50%);
	background: white;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}

	/menu icon/
	#menu{
	position: absolute;
	cursor: pointer;
	margin: 20px;
	width: 50px;
	height: 50px;
	right: 0;
	bottom: 0;
	background: $btn_back;
	@include transition (all 0.2s);
	}
	.line{
	margin: 20px auto;
	width:30px;
	height:4px;
	border-radius: 2px;
	background:black;
	}
	#menu > span {
	margin: 26%;
	position: absolute;
	top: 65%;
	display: block;
	width: $line-w;
	height: $line-h;
	margin-top: -0.5em;
	border-radius: 3px;
	background-color: white;
	}

	.menu-c > span:before,
	.menu-c > span:after {
	content: "";
	position: absolute;
	width: $line-w;
	height: $line-h;
	background-color: white;
	border-radius: 3px;
	@include transition (all 0.1s);
	}
	.menu-c > span:before {
	@include transform-translateY ($line-p);
	}

	.menu-c > span:after {
	@include transform-translateY ($line-p2);
	}

	/* OPENED */

	.menu-c.open {
	@include transform-rotate (45);
	}

	.menu-c.open > span:before {
	@include transform-rotate (90);
	}

	.menu-c.open > span:after {
	opacity: 0;
	@include transform-rotate (90);
	}

	.menu-c{
	border-radius: 5px;
	}
	.radius{
	border-radius: 100%;
	}

	/svg content/
	#linegroup{
	cursor:pointer;
	display:none;
	opacity:0;
	}
	#state1{
	fill: $btn_back;
	}
	#state2{
	display:none;
	}
	#state3{
	@include transform-translate (60px,50px);
	display:none;
	}