SVG popup with gsap js

Developer
Elleestcrimi
Size
4,211 Kb
Views
38,456
  1. SVG popup with gsap js Previews
  2. SVG popup with gsap js HTML Codes
  3. SVG popup with gsap js CSS Codes

How do I make an svg popup with gsap js?

What is a svg popup with gsap js? How do you make a svg popup with gsap js? This script and codes were developed by Elleestcrimi on 11 August 2022, Thursday.

SVG popup with gsap js Previews
IQ Test

SVG popup with gsap js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG popup with gsap js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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 src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script>
</body>
</html>

SVG popup with gsap js - Script Codes CSS Codes

/*color*/
/*margins*/
/*mixins*/
/*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: #57c7aa; width: 100%; height: 20px;
}
.linenav { margin: 0 auto; background: white; width: 120px; height: 20px; border-radius: 10px;
}
.cont { margin: 10px auto; background: #e8ebeb; width: 280px; height: 100px; border-radius: 6px;
}
.wip { position: absolute; padding: 20px; font-size: 50px; opacity: 0.2;
}
body { padding: 40px; background: #6e8282;
}
.black { overflow: hidden; position: absolute; width: 300px; height: 500px; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); 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: #e73f3f; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; 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: 25px; height: 2px; margin-top: -0.5em; border-radius: 3px; background-color: white;
}
.menu-c > span:before,
.menu-c > span:after { content: ""; position: absolute; width: 25px; height: 2px; background-color: white; border-radius: 3px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s;
}
.menu-c > span:before { -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -webkit-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px);
}
.menu-c > span:after { -moz-transform: translateY(6px); -ms-transform: translateY(6px); -webkit-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px);
}
/* OPENED */
.menu-c.open { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.menu-c.open > span:before { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.menu-c.open > span:after { opacity: 0; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
.menu-c { border-radius: 5px;
}
.radius { border-radius: 100%;
}
/*svg content*/
#linegroup { cursor: pointer; display: none; opacity: 0;
}
#state1 { fill: #e73f3f;
}
#state2 { display: none;
}
#state3 { -moz-transform: translate(60px, 50px); -ms-transform: translate(60px, 50px); -webkit-transform: translate(60px, 50px); -o-transform: translate(60px, 50px); transform: translate(60px, 50px); display: none;
}
SVG popup with gsap js - Script Codes
SVG popup with gsap js - Script Codes
Home Page Home
Developer Elleestcrimi
Username elleestcrimi
Uploaded August 11, 2022
Rating 3
Size 4,211 Kb
Views 38,456
Do you need developer help for SVG popup with gsap js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Elleestcrimi (elleestcrimi) Script Codes
Name
Pure CSS trustious.com Logo
Crude butterfly
Navy Present
Hypnotic Camera Lens
3D CSS3 TARDIS
Just another maze
Pink name card
Fixed header using flex box
Webkeyz Scattery Logo
My reading corner
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!