"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<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/HamishMW/pen/XJogMg?limit=all&page=11&q=animation" /> <script src="//use.typekit.net/ffm0dmn.js"></script> <script>try{Typekit.load();}catch(e){}</script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">body { background: #f9f9f9; text-align: center; } h1, p { font: 35px "adelle-sans", sans-serif; color: rgba(0, 0, 0, 0.7); margin-top: 60px; } p { margin-top: -50px; font-size: 18px; color: rgba(0, 0, 0, 0.5); } svg { display: block; margin: 60px auto; width: 80%; max-width: 320px; cursor: pointer; } #all-items { opacity: 0; } </style></head><body> <svg version="1.1" id="svg-animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 354 354" xml:space="preserve"><style type="text/css"> .st0{fill:#63BEDD;} .st1{fill:#A0AFB5;} .st2{fill:#A0AFB5;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} .st3{fill:#FFFFFF;} .st4{fill:none;stroke:#A0AFB5;stroke-width:2;stroke-miterlimit:10;} .st5{fill:#37A0E5;} .st6{fill:#4AD3AC;} .st7{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;} .st8{fill:#FBB03B;} .st9{fill:none;stroke:#F96155;stroke-width:2;stroke-miterlimit:10;} .st10{fill:#F96155;} .st11{fill:#F9F9F9;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} .st12{fill:#E2E6E8;stroke:#737F84;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;} </style><circle id="bg-circle" class="st0" cx="177" cy="177" r="177"/><g id="all-items"><polygon id="envelope-bg" class="st1" points="89 117 91 115 261 115 262 116 264 118 264 236 88 236 88 118 "/><polygon id="envelope-lip" class="st2" points="265 116 176 56 87 116"/><g id="screens"><g id="screen3"><path class="st3" d="M45 270c-2.8 0-5-2.2-5-5V165c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H45z"/><path class="st1" d="M189 161c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H45c-2.2 0-4-1.8-4-4V165c0-2.2 1.8-4 4-4H189M189 159H45c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V165C195 161.7 192.3 159 189 159L189 159z"/><line class="st4" x1="108" y1="184" x2="171" y2="184"/><line class="st4" x1="108" y1="192" x2="171" y2="192"/><line class="st4" x1="108" y1="200" x2="171" y2="200"/><line class="st4" x1="108" y1="208" x2="171" y2="208"/><line class="st4" x1="108" y1="216" x2="171" y2="216"/><line class="st4" x1="108" y1="224" x2="171" y2="224"/><line class="st4" x1="108" y1="232" x2="171" y2="232"/><line class="st4" x1="108" y1="240" x2="171" y2="240"/><line class="st4" x1="108" y1="248" x2="148" y2="248"/><rect x="61.5" y="182.5" class="st5" width="41" height="43"/><path class="st5" d="M102 183v42H62v-42H102M103 182H61v44h42V182L103 182z"/><polygon class="st3" points="77 197 88 204 77 211 "/></g><g id="screen2"><path class="st3" d="M104 231c-2.8 0-5-2.2-5-5V126c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H104z"/><path class="st1" d="M248 122c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H104c-2.2 0-4-1.8-4-4V126c0-2.2 1.8-4 4-4H248M248 120H104c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V126C254 122.7 251.3 120 248 120L248 120z"/><rect x="121" y="144" class="st6" width="39" height="41"/><path class="st6" d="M159 145v39h-37v-39H159M161 143h-41v43h41V143L161 143z"/><polyline class="st7" points="117.7 186.2 133.7 170.3 151.2 187.8 "/><polyline class="st7" points="137.2 173.7 147.5 163.4 161.1 176.9 "/><path class="st3" d="M134.6 154.7c2.1 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7 -3.7-1.7-3.7-3.7S132.5 154.7 134.6 154.7M134.6 152.7c-3.2 0-5.7 2.6-5.7 5.7s2.6 5.7 5.7 5.7 5.7-2.6 5.7-5.7S137.7 152.7 134.6 152.7L134.6 152.7z"/><rect x="168.5" y="143.5" class="st5" width="63" height="42"/><path class="st5" d="M231 144v41h-62v-41H231M232 143h-64v43h64V143L232 143z"/><polygon class="st3" points="195 158 206 165 195 172 "/><line class="st4" x1="120" y1="194" x2="232" y2="194"/><line class="st4" x1="120" y1="202" x2="232" y2="202"/><line class="st4" x1="120" y1="210" x2="189" y2="210"/></g><g id="screen1"><path class="st3" d="M163 194c-2.8 0-5-2.2-5-5V89c0-2.8 2.2-5 5-5h144c2.8 0 5 2.2 5 5v100c0 2.8-2.2 5-5 5H163z"/><path class="st1" d="M307 85c2.2 0 4 1.8 4 4v100c0 2.2-1.8 4-4 4H163c-2.2 0-4-1.8-4-4V89c0-2.2 1.8-4 4-4H307M307 83H163c-3.3 0-6 2.7-6 6v100c0 3.3 2.7 6 6 6h144c3.3 0 6-2.7 6-6V89C313 85.7 310.3 83 307 83L307 83z"/><g id="screen2sim_1_"><rect x="250.5" y="107.5" class="st8" width="40" height="41"/><path class="st8" d="M290 108v40h-39v-40H290M291 107h-41v42h41V107L291 107z"/></g><path class="st7" d="M279.4 124.6c2 4.5-0.1 9.8-4.7 11.8s-9.8-0.1-11.8-4.7c-2-4.5 0.1-9.8 4.7-11.8C272.2 117.9 277.4 120 279.4 124.6z"/><path class="st3" d="M280 129.7c-0.1 0.6-0.3 1.2-0.5 1.7 1.4 1.1 2.1 2.1 1.9 2.6 -0.3 0.7-1.5 0.9-3.8 0.4 -1.8-0.4-4.3-1.2-7.7-2.5 -3.5-1.4-6-2.8-7.6-4 -1.7-1.3-2.4-2.3-2.1-2.9 0.3-0.5 1.3-0.6 2.8-0.4 0.2-0.5 0.5-1.1 0.9-1.5 -5.2-1.4-9.1-1.7-9.8-0.5 -0.8 1.4 2 4.5 8.5 7.8 2 1 4.2 2.1 6.9 3.1 2.4 0.9 4.5 1.7 6.4 2.4 7.7 2.6 11.1 2.7 11.8 1.1C288.2 135.6 285.2 132.7 280 129.7z"/><line class="st4" x1="181" y1="108" x2="244" y2="108"/><line class="st4" x1="181" y1="116" x2="244" y2="116"/><line class="st4" x1="181" y1="124" x2="244" y2="124"/><line class="st4" x1="181" y1="132" x2="244" y2="132"/><line class="st4" x1="181" y1="140" x2="244" y2="140"/><line class="st4" x1="181" y1="148" x2="220" y2="148"/><line class="st9" x1="181" y1="165" x2="291" y2="165"/><path class="st3" d="M199 170c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5S201.8 170 199 170z"/><path class="st10" d="M199 161c2.2 0 4 1.8 4 4s-1.8 4-4 4 -4-1.8-4-4S196.8 161 199 161M199 159c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6S202.3 159 199 159L199 159z"/></g></g><g id="envelope-fg"><polygon class="st11" points="265 235 87 235 87 117 "/><polygon class="st12" points="265 117 265 235 176 176 "/></g></g></svg> <h1>Click the circle for awesomeness<h1> <p>Or don't, I can't really force you to</p> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script >window.onload = function() { var canvas = Snap.select("#svg-animation"), allItems = canvas.select("#all-items"), envelopeBg = canvas.select("#envelope-bg"), envelopeFg = canvas.select("#envelope-fg"), envelopeLip = canvas.select("#envelope-lip"), screens = canvas.select("#screens"), screen1 = screens.select("#screen1"), screen2 = screens.select("#screen2"), screen3 = screens.select("#screen3"), circleBg = canvas.select("#bg-circle"), bigCircle = canvas.circle(177, 177, 177), screenlist = [screen1, screen2, screen3]; var envelopeLipTop = allItems.polygon("265,116 176,56 87,116"); var closedLip = "265,116 176,176 87,116"; allItems.attr({ clip: bigCircle, opacity: 1 }); envelopeLipTop.attr({ opacity: 0 }); screens.transform("t0,280"); envelopeTransform("t0,300", false); function envelopeTransform(params, animation, nextAnim) { if (!animation) { envelopeBg.transform(params); envelopeFg.transform(params); envelopeLip.transform(params); } else { envelopeBg.animate({ transform: params }, 300, mina.easeinout); envelopeFg.animate({ transform: params }, 300, mina.easeinout); envelopeLip.animate({ transform: params }, 300, mina.easeinout, nextAnim); } } function animateUp(element) { element.animate({ transform: "t0,-280" }, 1000, mina.elastic); } for (i = 0; i < 3; i++) {if (window.CP.shouldStopExecution(1)){break;} (function(i) { setTimeout(function() { animateUp(screenlist[i]); }, 200 * i); }(i)); } window.CP.exitedLoop(1); function initSequence() { screen1.animate({ transform: "t-59,-243" }, 200, mina.easeinout); screen3.animate({ transform: "t59,-319" }, 200, mina.easeinout, dropPulse); } function dropPulse() { pulseCircle = canvas.circle(176, 176, 50); pulseCircle.attr({ stroke: "#fff", fill: "rgba(0,0,0,0)", strokeWidth: 15, opacity: 0 }); pulseCircle.animate({ r: 100, opacity: 1 }, 200, mina.easeinout); setTimeout(function() { pulseCircle.animate({ r: 120, opacity: 0 }, 200, mina.easeinout, moveEnvelope); }, 90); } function moveEnvelope() { setTimeout(function() { envelopeTransform("t0,0", true, animateLip); }, 50) } function animateLip() { envelopeLip.animate({ opacity: 0 }, 0, mina.linear); envelopeLipTop.attr({ fill: "#A0AFB5", stroke: "#737F84", strokeWidth: 2, strokeLineJoin: "round", opacity: 1 }); envelopeLipTop.animate({ "points": closedLip, fill: "#fff" }, 200, mina.easeinout, envelopeAnimOut); } function envelopeAnimOut() { setTimeout(function() { envelopeBg.animate({ transform: "t300,0" }, 300, mina.easeinout); envelopeFg.animate({ transform: "t300,0" }, 300, mina.easeinout); envelopeLipTop.animate({ transform: "t300,0" }, 300, mina.easeinout); screens.animate({ transform: "t300,280" }, 300, mina.easeinout, closeCircle); }, 200) } function closeCircle() { circleBg.animate({ r: 50, fill: '#4ad3ac' }, 800, mina.bounce); tick = allItems.polyline("156,179 170,193 199.2,163.8"); tick.attr({ stroke: "#fff", fill: "rgba(0,0,0,0)", strokeWidth: 4 }); } function animate() { initSequence(); } canvas.click(function() { animate(); canvas.unclick(); }); }; //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments:

Great. I see there are lot of js libraries. How can I load everything locally?

ugintl () - 5 years ago - Reply 0