Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/SVG popup with gsap js.markdown

Forked from anonymous/SVG popup with gsap js.markdown
Created December 9, 2015 11:45
Show Gist options
  • Save CodeMyUI/359a393a3768d697a2aa to your computer and use it in GitHub Desktop.
Save CodeMyUI/359a393a3768d697a2aa to your computer and use it in GitHub Desktop.
Download ZIP
SVG popup with gsap js
Raw
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>
Raw
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"
});
});
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment