<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='backgroundLowerlight'>
<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/sdras/pen/JbaGwg?limit=all&page=72&q=nav" />
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:300|Oswald:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screen_copy_copy_copy_copy_copy.css'><link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/github.css'>
<style class="cp-pen-styles">section {
margin: 100px 0 50px;
padding-top: 50px;
}
section:first-child {
margin: 50px 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
p {
margin-bottom: 15px;
}
section:last-child {
padding-bottom: 100px;
}
section:after {
content: "";
display: table;
clear: both;
}
.sectTitle {
z-index: 300;
}
.fluid-behind {
color: white;
font-family: "Oswald";
text-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
font-size: 130px;
letter-spacing: 0.15em;
position: fixed;
top: 50%;
left: 20%;
-webkit-transform: translate(-15%, -40%);
transform: translate(-15%, -40%);
}
.number {
font-family: "Roboto Slab";
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 60px;
}
.yes, .no {
height: 220px;
margin-top: 50px;
margin-right: 20px;
padding: 0;
background: white;
box-shadow: inset 0px 0px 1px 0px #b4b4b4;
}
.yes {
border-bottom: 5px solid #20c063;
}
.no {
border-bottom: 5px solid #e13009;
}
#section2 .yes, #section2 .no {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/basemap.jpg") no-repeat;
background-size: cover;
}
.iconContainer {
width: 35px;
}
pre, code {
font-size: 13px;
}
.positionAbsolute {
position: absolute;
}
.explainContain {
height: 300px;
margin-top: 50px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
padding: 235px 20px 20px;
}
.descContain {
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
padding: 80px 80px 50px;
}
.description {
margin-top: 110px;
}
.description h1 {
letter-spacing: 0.3em;
margin-top: 22px;
}
.hrSide {
height: 10px;
margin-top: 23px;
background: #EFEFEF;
}
nav {
position: fixed;
right: 20px;
height: 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 50000;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
nav a, nav a:active, nav a:visited {
outline: none;
border: none;
color: white !important;
}
nav .line {
position: absolute;
width: 1px;
height: 100%;
right: 39px;
}
nav .node {
width: 11px;
height: 11px;
border-radius: 50%;
outline: none;
border: none;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
nav .node:hover {
-webkit-transform: scale(1.3) translateZ(0);
transform: scale(1.3) translateZ(0);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
background: #5F4343;
}
nav .node.last {
border-radius: 0 !important;
width: 45px;
height: 45px;
-webkit-transform: translateX(-15px) translateZ(0);
transform: translateX(-15px) translateZ(0);
padding: 10px 13px;
}
nav .node.last:hover {
-webkit-transform: scale(1) translate3D(-15px, 0, 0);
transform: scale(1) translate3D(-15px, 0, 0);
}
/*--Demos--*/
.demoOverlay {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
opacity: 0.97;
padding: 0 5px;
z-index: 3000;
}
.absMiddle, .markerPrimary, .demo svg, .play, .movet1, .markerstem, .greybar, .houseBk, .fakemodal, .devYesStart, .devNoStart {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.demo svg {
width: 170px;
}
.play {
font-size: 26px;
display: block;
opacity: 0.3;
}
#input_field-3n {
-webkit-transform-origin: 5% 0%;
transform-origin: 5% 0%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#input_field-2n, #input_fieldn {
-webkit-transform-origin: 30% 50%;
transform-origin: 30% 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#r-2, #top_text-2, #fake_text-6, #fake_text-4, #r-2n, #top_text-2n, #fake_text-6n, #fake_text-4n {
visibility: hidden;
}
#r-2 path, #r-2n path {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.house {
margin-left: -55px;
margin-top: -24px;
visibility: hidden;
z-index: 50;
}
.movet1 {
color: white;
font-size: 0.9em;
}
.markerstem {
width: 4px;
height: 4px;
background: #20c063;
border-right: 1px solid #228959;
border-bottom: 1px solid #228959;
-webkit-transform: rotate(45deg) translate(-50%, -50%);
transform: rotate(45deg) translate(-50%, -50%);
margin-top: 11px;
}
.markerPrimary:before {
display: none;
}
.movet2 {
opacity: 0;
}
.greybar {
width: 70px;
height: 5px;
margin-left: 46px;
}
.greybar.bar1 {
margin-top: -18px;
}
.greybar.bar2 {
margin-top: -6px;
}
.greybar.bar3 {
margin-top: 5px;
}
.greybar.bar4 {
margin-top: 18px;
}
.houseBk {
width: 94px;
height: 63px;
margin-top: -22px;
margin-left: -52px;
}
.movet3 {
margin-top: 21px;
color: #3b4144;
margin-left: 109px;
}
.fakemodal {
background: white;
width: 200px;
height: 87px;
display: none;
}
.house2 {
margin-left: -40px;
display: none;
}
.entranceyes {
width: 280px;
}
.entranceno {
width: 280px;
}
#section4 .yes, #section4 .no {
background: #e2f2e4;
}
.demo svg.dev-yes, .demo svg.dev-no {
width: 215px;
}
.clock {
opacity: 0;
}
</style></head><body>
<div class="fluid-behind">Fluid Motion</div>
<nav>
<div class="line backgroundMidnight"></div>
<a href="#section1"><div class="node backgroundMidnight"></div></a>
<a href="#section2"><div class="node backgroundMidnight"></div></a>
<a href="#section3"><div class="node backgroundMidnight"></div></a>
<a href="#section4"><div class="node backgroundMidnight"></div></a>
<div class="node last backgroundMidnight">
<i class="iconDown typeReversed"></i>
</div>
</nav>
<div class="containerFluid backgroundLowerlight" id="wrapper">
<section id="section1">
<div class="row">
<div class="xsColOffset1 xsCol18 smlColOffset2 smlCol18 mdColOffset4 mdCol18 positionRelative">
<div class="xsCol2 smlCol2 mdCol2">
<div class="number">01</div>
</div>
<div class="xsCol4 xsColOffset15 smlCol4 smlColOffset15 mdCol4 mdColOffset15 positionAbsolute">
<div class="hrSide"></div>
</div>
<div class="xsCol13 xsColOffset3 smlCol18 smlColOffset3 mdCol13 mdColOffset3 positionAbsolute backgroundLowerlight explainContain typeLowlight">
Morphing does mean that shapes can shift. Morphing does not get paired with a dramatic effect like flipping.
</div><!--explainContain-->
<div class="xsCol20 smlCol10 mdCol6 yes">
<div class="demo">
<svg class="rr-image rr1" xmlns="http://www.w3.org/2000/svg" width="219.3" height="244.2" viewBox="0 0 219.3 244.2" aria-labelledby="title">
<defs>
<filter id="AI_GaussianBlur_4">
<feGaussianBlur stdDeviation="4"/>
</filter>
</defs>
<title>Renter Resume</title>
<g id="r-1">
<g filter="url(#AI_GaussianBlur_4)">
<path d="M12.5 233.6a3.8 3.8 0 0 1-3.9-3.7V13.1a3.8 3.8 0 0 1 3.9-3.7h197a3.8 3.8 0 0 1 3.9 3.7v216.8a3.8 3.8 0 0 1-3.9 3.7h-197z" fill="#ccc"/>
</g>
<path id="form_bg" data-name="form bg" d="M15.3 230.5a3.7 3.7 0 0 1-3.8-3.6V16.1a3.7 3.7 0 0 1 3.8-3.6h191.4a3.7 3.7 0 0 1 3.8 3.6v210.7a3.7 3.7 0 0 1-3.8 3.6H15.3z" fill="#fff" stroke="#10a75f" stroke-miterlimit="10" stroke-width="2"/>
<path id="button" d="M142.7 214.1H80.5a1.2 1.2 0 0 1-1.2-1.2v-22.5a1.2 1.2 0 0 1 1.2-1.2h62.2a1.2 1.2 0 0 1 1.2 1.2v22.5a1.2 1.2 0 0 1-1.2 1.2" fill="#10a75f" fill-rule="evenodd"/>
<path id="input_field" data-name="input field" d="M190.7 174.1H32.8a1.6 1.6 0 0 1-1.6-1.6V158a1.6 1.6 0 0 1 1.6-1.6h157.9a1.6 1.6 0 0 1 1.6 1.6v14.5a1.6 1.6 0 0 1-1.6 1.6" fill="#f5f6f7" stroke="#b1b6bb" stroke-miterlimit="10"/>
<path id="fake_text" data-name="fake text" fill="#cdd1d4" d="M31.1 138.7h144.3v9.48H31.1z"/>
<path id="input_field-2" data-name="input field" d="M190.7 122.3H32.8a1.6 1.6 0 0 1-1.6-1.6v-14.5a1.6 1.6 0 0 1 1.6-1.6h157.9a1.6 1.6 0 0 1 1.6 1.6v14.5a1.6 1.6 0 0 1-1.6 1.6" fill="#f5f6f7" stroke="#b1b6bb" stroke-miterlimit="10"/>
<path id="fake_text-2" data-name="fake text" fill="#cdd1d4" d="M31.1 86.9H124v9.48H31.1z"/>
<path id="input_field-3" data-name="input field" d="M190.7 70.5H32.8a1.6 1.6 0 0 1-1.6-1.6V54.4a1.6 1.6 0 0 1 1.6-1.6h157.9a1.6 1.6 0 0 1 1.6 1.6v14.5a1.6 1.6 0 0 1-1.6 1.6" fill="#f5f6f7" stroke="#b1b6bb" stroke-miterlimit="10"/>
<path id="fake_text-3" data-name="fake text" fill="#cdd1d4" d="M31.1 35.1h114.7v9.48H31.1z"/>
</g>
<g id="r-2">
<g id="fake_text_lines" data-name="fake text lines" fill="#cdd1d4">
<path id="fake_text-4" data-name="fake text" d="M31 158.8h160v9.48H31z"/>
<path id="fake_text-5" data-name="fake text" d="M31 129.3h160v9.48H31z"/>
<path id="fake_text-6" data-name="fake text" d="M31 99.8h160v9.48H31z"/>
</g>
<path id="hr" fill="#e8e9ea" d="M13 79.8h196v1H13z"/>
<path id="top_text" data-name="top text" fill="#cdd1d4" d="M115.7 52.8h55.2v8h-55.2z"/>
<path id="top_text-2" data-name="top text" fill="#cdd1d4" d="M33.6 52.8h72.2v8H33.6z"/>
<g id="rachel_smith" data-name="rachel smith" fill="#cdd1d4">
<path d="M39.1 37.2l2.1 3.6h-1.6l-1.9-3.4h-1.5v3.4h-1.4v-8.4h3c1.5 0 3 .6 3 2.4a2.3 2.3 0 0 1-1.7 2.4zm-1.5-3.6h-1.4v2.7h1.5c1.2 0 1.7-.5 1.7-1.4s-.6-1.4-1.8-1.4z"/>
<path d="M45.8 40a2 2 0 0 1-1.8.9 1.7 1.7 0 0 1-1.9-1.6c0-1.5 1.8-2 3.7-2V37a1.1 1.1 0 0 0-2.1-.1l-1.3-.2c.1-1.1 1.2-1.7 2.4-1.7a2 2 0 0 1 2.3 2.1v3a2.2 2.2 0 0 0 .1.8h-1.3a1.9 1.9 0 0 1-.1-.9zm0-1.4v-.4c-1.4 0-2.4.3-2.4 1a.8.8 0 0 0 .9.7 1.3 1.3 0 0 0 1.4-1.2z"/>
<path d="M51.1 34.9a2.3 2.3 0 0 1 2.4 1.6l-1.2.5a1.2 1.2 0 0 0-1.2-1c-.9 0-1.4.9-1.4 1.9s.4 1.9 1.4 1.9a1.2 1.2 0 0 0 1.1-.9l1.3.5a2.6 2.6 0 0 1-2.4 1.5 2.7 2.7 0 0 1-2.8-3 2.7 2.7 0 0 1 2.8-3z"/>
<path d="M54.7 32.4h1.4v3.5a1.9 1.9 0 0 1 1.7-.9 1.8 1.8 0 0 1 2 1.9v3.9h-1.3v-3.6a1 1 0 0 0-1.1-1.1 1.5 1.5 0 0 0-1.3 1.7v3h-1.4v-8.4z"/>
<path d="M66.3 39.5a2.6 2.6 0 0 1-2.4 1.4 2.7 2.7 0 0 1-2.8-3 2.7 2.7 0 0 1 2.8-3 2.6 2.6 0 0 1 2.7 3v.4h-4.1a1.5 1.5 0 0 0 1.4 1.6 1.3 1.3 0 0 0 1.3-.9zm-3.8-2.2h2.7a1.3 1.3 0 0 0-1.3-1.4 1.4 1.4 0 0 0-1.4 1.4z"/>
<path d="M67.8 32.4h1.4v8.4h-1.4v-8.4z"/>
<path d="M76.9 35.9c1.9.3 2.9 1 2.9 2.5s-1.2 2.5-3.2 2.5-3.3-1.2-3.3-2.5l1.4-.2a1.7 1.7 0 0 0 1.9 1.6c1.1 0 1.8-.5 1.8-1.4s-.5-1.1-1.9-1.4-3-.9-3-2.4 1.3-2.4 3-2.4a2.9 2.9 0 0 1 3.2 2.3l-1.4.3a1.6 1.6 0 0 0-1.8-1.4c-1.1 0-1.6.5-1.6 1.2s.6 1 2 1.3z"/>
<path d="M81.3 35.1h1.3v.9a1.8 1.8 0 0 1 1.7-1 1.8 1.8 0 0 1 1.7 1 2.2 2.2 0 0 1 1.8-1 1.8 1.8 0 0 1 1.9 1.9v3.9h-1.4v-3.6a1 1 0 0 0-.9-1.1c-.6 0-1.2.6-1.2 1.7v3h-1.4v-3.6a1 1 0 0 0-1-1.1c-.6 0-1.2.6-1.2 1.7v3h-1.4v-5.7z"/>
<path d="M92.1 32.2a.8.8 0 0 1 .8.8.85.85 0 0 1-1.7 0 .8.8 0 0 1 .9-.8zm-.7 2.9h1.4v5.7h-1.4v-5.7z"/>
<path d="M97.6 40.7l-1.2.2a1.5 1.5 0 0 1-1.7-1.6v-3.2h-1v-1h1v-1.6l1.4-.6v2.2h1.3v1h-1.3v3a.5.5 0 0 0 .5.7l.6-.2z"/>
<path d="M98.8 32.4h1.4v3.5a1.9 1.9 0 0 1 1.7-.9 1.8 1.8 0 0 1 2 1.9v3.9h-1.4v-3.6a1 1 0 0 0-1.1-1.1 1.5 1.5 0 0 0-1.3 1.7v3h-1.4v-8.4z"/>
</g>
</g>
</svg>
</div><!--demo-->
<div class="demoOverlay demo1-1 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCheck typeGoodIndicator h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--yes-->
<div class="xsCol20 xsColOffset2 smlCol10 smlColOffset0 mdCol6 mdColOffset0 no">
<div class="demo">
<svg class="rr-image rr2" xmlns="http://www.w3.org/2000/svg" width="219.3" height="244.2" viewBox="0 0 219.3 244.2" aria-labelledby="title">
<defs>
<filter id="AI_GaussianBlur_4">
<feGaussianBlur stdDeviation="4"/>
</filter>
</defs>
<title>Renter Resume</title>
<g id="r-1">
<g filter="url(#AI_GaussianBlur_4)">
<path d="M12.5 233.6a3.8 3.8 0 0 1-3.9-3.7V13.1a3.8 3.8 0 0 1 3.9-3.7h197a3.8 3.8 0 0 1 3.9 3.7v216.8a3.8 3.8 0 0 1-3.9 3.7h-197z" fill="#ccc"/>
</g>
<path id="form_bgn" data-name="form bg" d="M15.3 230.5a3.7 3.7 0 0 1-3.8-3.6V16.1a3.7 3.7 0 0 1 3.8-3.6h191.4a3.7 3.7 0 0 1 3.8 3.6v210.7a3.7 3.7 0 0 1-3.8 3.6H15.3z" fill="#fff" stroke="#10a75f" stroke-miterlimit="10" stroke-width="2"/>
<path id="buttonn" d="M142.7 214.1H80.5a1.2 1.2 0 0 1-1.2-1.2v-22.5a1.2 1.2 0 0 1 1.2-1.2h62.2a1.2 1.2 0 0 1 1.2 1.2v22.5a1.2 1.2 0 0 1-1.2 1.2" fill="#10a75f" fill-rule="evenodd"/>
<path id="input_fieldn" data-name="input field" d="M190.7 174.1H32.8a1.6 1.6 0 0 1-1.6-1.6V158a1.6 1.6 0 0 1 1.6-1.6h157.9a1.6 1.6 0 0 1 1.6 1.6v14.5a1.6 1.6 0 0 1-1.6 1.6" fill="#f5f6f7" stroke="#b1b6bb" stroke-miterlimit="10"/>
<path id="fake_textn" data-name="fake text" fill="#cdd1d4" d="M31.1 138.7h144.3v9.48H31.1z"/>
<path id="input_field-2n" data-name="input field" d="M190.7 122.3H32.8a1.6 1.6 0 0 1-1.6-1.6v-14.5a1.6 1.6 0 0 1 1.6-1.6h157.9a1.6 1.6 0 0 1 1.6 1.6v14.5a1.6 1.6 0 0 1-1.6 1.6" fill="#f5f6f7" stroke="#b1b6bb" stroke-miterlimit="10"/>
<path id="fake_text-2n" data-name="fake text" fill="#cdd1d4" d="M31.1 86.9H124v9.48H31.1z"/>
<path id="input_field-3n" data-name="input field" d="M190.7 70.5H32.8a1.6 1.6 0 0 1-1.6-1.6V54.4a1.6 1.6 0 0 1 1.6-1.6h157.9a1.6 1.6 0 0 1 1.6 1.6v14.5a1.6 1.6 0 0 1-1.6 1.6" fill="#f5f6f7" stroke="#b1b6bb" stroke-miterlimit="10"/>
<path id="fake_text-3n" data-name="fake text" fill="#cdd1d4" d="M31.1 35.1h114.7v9.48H31.1z"/>
</g>
<g id="r-2n">
<g id="fake_text_linesn" data-name="fake text lines" fill="#cdd1d4">
<path id="fake_text-4n" data-name="fake text" d="M31 158.8h160v9.48H31z"/>
<path id="fake_text-5n" data-name="fake text" d="M31 129.3h160v9.48H31z"/>
<path id="fake_text-6n" data-name="fake text" d="M31 99.8h160v9.48H31z"/>
</g>
<path id="hrn" fill="#e8e9ea" d="M13 79.8h196v1H13z"/>
<path id="top_textn" data-name="top text" fill="#cdd1d4" d="M115.7 52.8h55.2v8h-55.2z"/>
<path id="top_text-2n" data-name="top text" fill="#cdd1d4" d="M33.6 52.8h72.2v8H33.6z"/>
<g id="rachel_smithn" data-name="rachel smith" fill="#cdd1d4">
<path d="M39.1 37.2l2.1 3.6h-1.6l-1.9-3.4h-1.5v3.4h-1.4v-8.4h3c1.5 0 3 .6 3 2.4a2.3 2.3 0 0 1-1.7 2.4zm-1.5-3.6h-1.4v2.7h1.5c1.2 0 1.7-.5 1.7-1.4s-.6-1.4-1.8-1.4z"/>
<path d="M45.8 40a2 2 0 0 1-1.8.9 1.7 1.7 0 0 1-1.9-1.6c0-1.5 1.8-2 3.7-2V37a1.1 1.1 0 0 0-2.1-.1l-1.3-.2c.1-1.1 1.2-1.7 2.4-1.7a2 2 0 0 1 2.3 2.1v3a2.2 2.2 0 0 0 .1.8h-1.3a1.9 1.9 0 0 1-.1-.9zm0-1.4v-.4c-1.4 0-2.4.3-2.4 1a.8.8 0 0 0 .9.7 1.3 1.3 0 0 0 1.4-1.2z"/>
<path d="M51.1 34.9a2.3 2.3 0 0 1 2.4 1.6l-1.2.5a1.2 1.2 0 0 0-1.2-1c-.9 0-1.4.9-1.4 1.9s.4 1.9 1.4 1.9a1.2 1.2 0 0 0 1.1-.9l1.3.5a2.6 2.6 0 0 1-2.4 1.5 2.7 2.7 0 0 1-2.8-3 2.7 2.7 0 0 1 2.8-3z"/>
<path d="M54.7 32.4h1.4v3.5a1.9 1.9 0 0 1 1.7-.9 1.8 1.8 0 0 1 2 1.9v3.9h-1.3v-3.6a1 1 0 0 0-1.1-1.1 1.5 1.5 0 0 0-1.3 1.7v3h-1.4v-8.4z"/>
<path d="M66.3 39.5a2.6 2.6 0 0 1-2.4 1.4 2.7 2.7 0 0 1-2.8-3 2.7 2.7 0 0 1 2.8-3 2.6 2.6 0 0 1 2.7 3v.4h-4.1a1.5 1.5 0 0 0 1.4 1.6 1.3 1.3 0 0 0 1.3-.9zm-3.8-2.2h2.7a1.3 1.3 0 0 0-1.3-1.4 1.4 1.4 0 0 0-1.4 1.4z"/>
<path d="M67.8 32.4h1.4v8.4h-1.4v-8.4z"/>
<path d="M76.9 35.9c1.9.3 2.9 1 2.9 2.5s-1.2 2.5-3.2 2.5-3.3-1.2-3.3-2.5l1.4-.2a1.7 1.7 0 0 0 1.9 1.6c1.1 0 1.8-.5 1.8-1.4s-.5-1.1-1.9-1.4-3-.9-3-2.4 1.3-2.4 3-2.4a2.9 2.9 0 0 1 3.2 2.3l-1.4.3a1.6 1.6 0 0 0-1.8-1.4c-1.1 0-1.6.5-1.6 1.2s.6 1 2 1.3z"/>
<path d="M81.3 35.1h1.3v.9a1.8 1.8 0 0 1 1.7-1 1.8 1.8 0 0 1 1.7 1 2.2 2.2 0 0 1 1.8-1 1.8 1.8 0 0 1 1.9 1.9v3.9h-1.4v-3.6a1 1 0 0 0-.9-1.1c-.6 0-1.2.6-1.2 1.7v3h-1.4v-3.6a1 1 0 0 0-1-1.1c-.6 0-1.2.6-1.2 1.7v3h-1.4v-5.7z"/>
<path d="M92.1 32.2a.8.8 0 0 1 .8.8.85.85 0 0 1-1.7 0 .8.8 0 0 1 .9-.8zm-.7 2.9h1.4v5.7h-1.4v-5.7z"/>
<path d="M97.6 40.7l-1.2.2a1.5 1.5 0 0 1-1.7-1.6v-3.2h-1v-1h1v-1.6l1.4-.6v2.2h1.3v1h-1.3v3a.5.5 0 0 0 .5.7l.6-.2z"/>
<path d="M98.8 32.4h1.4v3.5a1.9 1.9 0 0 1 1.7-.9 1.8 1.8 0 0 1 2 1.9v3.9h-1.4v-3.6a1 1 0 0 0-1.1-1.1 1.5 1.5 0 0 0-1.3 1.7v3h-1.4v-8.4z"/>
</g>
</g>
</svg>
</div><!--demo-->
<div class="demoOverlay demo1-2 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCancel typeWarning h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--yes-->
</div>
</div><!--row-->
<div class="row">
<div class="xsColOffset1 xsCol18 smlColOffset2 smlCol18 mdColOffset4 mdCol18 description">
<div class="xsCol23 xsColOffset1 smlCol20 smlColOffset3 mdCol13 mdColOffset3 backgroundLowerlight descContain">
In Fluid Motion, we try to retain states for our viewer. This means that elements can be transformed from one state to another. If you have a button, for instance, that a user clicks to submit something, we can transform that element into a confirmation.
</div><!--explainContain-->
<div class="mdCol20 positionAbsolute sectTitle">
<h1 class="typeCaps typeEmphasize plm mls">Morphing</h1>
</div>
<div>
</div><!--row-->
</section>
<section id="section2">
<div class="row">
<div class="mdColOffset4 mdCol18 positionRelative">
<div class="mdCol2">
<div class="number">02</div>
</div>
<div class="mdCol4 mdColOffset15 positionAbsolute">
<div class="hrSide"></div>
</div>
<div class="xsCol20 xsColOffset3 smlCol20 smlColOffset3 mdCol13 mdColOffset3 positionAbsolute backgroundLowerlight explainContain typeLowlight">
Note how the button call to action becomes the title in the second state. We keep spatial awareness for the user and try not to break it.
</div><!--explainContain-->
<div class="mdCol6 yes">
<div class="demo">
<div class="markerPrimary m1" id="t1">
<div class="movet2">$147k</div>
</div>
<div class="markerstem"></div>
<div class="movet1">$147k</div>
<div class="houseBk backgroundLowerlight"></div>
<div class="greybar bar1 backgroundControls"></div>
<div class="greybar bar2 backgroundControls"></div>
<svg class="house" xmlns="http://www.w3.org/2000/svg" width="71.8" height="43.4" viewBox="0 0 71.8 43.4">
<title>
context-house
</title>
<path d="M70 17.9H14.7a.4.4 0 0 0-.4.4v20.3a.4.4 0 0 0 .4.4H70a.4.4 0 0 0 .4-.4V18.4a.4.4 0 0 0-.4-.5z" fill="#cdd1d4" stroke="#869099" stroke-miterlimit="10" stroke-width="2"/>
<path d="M67.5 6.2a.4.4 0 0 0-.4-.3H17.7a.4.4 0 0 0-.4.3l-3 11.6a.4.4 0 0 0 .1.4l.3.2H70l.3-.2a.4.4 0 0 0 .1-.4zM13.97 42.32l.007-4.5 56.82.1-.007 4.5z" fill="#b1b6bb" stroke="#869099" stroke-miterlimit="10" stroke-width="2"/>
<path fill="#fff" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M21.334 32.244l.016-8.9 5.92.01-.016 8.9z"/>
<path fill="#869099" d="M20.04 33.45l.003-1.5 8.4.015-.002 1.5z"/>
<path d="M24.3 23.1a.4.4 0 0 0-.4.4v8.3a.45.45 0 1 0 .9 0v-8.3a.4.4 0 0 0-.5-.4z" fill="#869099"/>
<path d="M27 27.3h-5.6a.45.45 0 0 0 0 .9H27a.45.45 0 0 0 0-.9z" fill="#869099"/>
<path fill="#9dfcb2" d="M32 19.6H52.8l-10.4-7.2L32 19.6"/>
<path d="M53 19.2L42.6 12a.4.4 0 0 0-.5 0l-10.4 7.2a.412.412 0 0 0 .2.8h20.8a.427.427 0 0 0 .3-.8z" fill="#869099"/>
<path fill="#f5f6f7" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M34.2 19.8v22.6h16.3l.1-22.5-8.2-5.6-8.2 5.5z"/>
<path fill="#e8e9ea" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M21.034 9.808l.012-6.8 4.1.007-.012 6.8z"/>
<path fill="#b1b6bb" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M20.038 3l.004-2 5.96.01-.004 2z"/>
<path fill="#fff" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M39.366 32.244l.015-8.9 5.92.01-.014 8.9z"/>
<path fill="#fff" d="M43.7 30.1v-5.2h-2.2l2.2 5.2"/>
<path fill="#869099" d="M38.172 33.55l.003-1.5 8.4.015-.003 1.5z"/>
<path d="M42.4 23.2a.4.4 0 0 0-.4.4v8.3a.45.45 0 1 0 .9 0v-8.3a.4.4 0 0 0-.5-.4z" fill="#869099"/>
<path d="M45.1 27.3h-5.6a.45.45 0 0 0 0 .9h5.6a.45.45 0 0 0 0-.9z" fill="#869099"/>
<path fill="#fff" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M57.497 32.244l.016-8.9 5.92.01-.016 8.9z"/>
<path fill="#869099" d="M56.204 33.55l.002-1.5 8.4.015-.002 1.5z"/>
<path d="M60.5 23.2a.4.4 0 0 0-.4.4v8.3a.45.45 0 1 0 .9 0v-8.3a.4.4 0 0 0-.5-.4z" fill="#869099"/>
<path d="M63.2 27.4h-5.6a.45.45 0 0 0 0 .9h5.6a.45.45 0 0 0 0-.9zM5.4 33.1h1.2v9.56H5.4z" fill="#869099"/>
<path d="M1.4 28.4c-1.1 2.7-.4 5.6 2 8a3.5 3.5 0 0 0 5 0c2.4-2.4 3.1-5.3 2-8a4.9 4.9 0 0 0-9 0z" fill="#b1b6bb"/>
<path d="M10.5 28.4A4.8 4.8 0 0 0 6 25.3v12.2a3.5 3.5 0 0 0 2.5-1.1c2.3-2.4 3.1-5.3 2-8z" fill="#cdd1d4"/>
<path d="M1.4 28.4c-1.1 2.7-.4 5.6 2 8a3.5 3.5 0 0 0 5 0c2.4-2.4 3.1-5.3 2-8a4.9 4.9 0 0 0-9 0z" fill="none" stroke="#869099" stroke-miterlimit="10" stroke-width="2"/>
</svg>
</div><!--demo-->
<div class="demoOverlay demo2-1 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCheck typeGoodIndicator h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div> <!--demoOverlay-->
</div><!--yes-->
<div class="mdCol6 no">
<div class="demo">
<div class="markerPrimary">$147k</div>
<div class="fakemodal">
<i class="iconCancel typeLowlight floatRight"></i>
<div class="movet3">$147k</div>
<div class="greybar bar3 backgroundControls"></div>
<div class="greybar bar4 backgroundControls"></div>
</div>
<svg class="house2" xmlns="http://www.w3.org/2000/svg" width="71.8" height="43.4" viewBox="0 0 71.8 43.4">
<title>
context-house
</title>
<path d="M70 17.9H14.7a.4.4 0 0 0-.4.4v20.3a.4.4 0 0 0 .4.4H70a.4.4 0 0 0 .4-.4V18.4a.4.4 0 0 0-.4-.5z" fill="#cdd1d4" stroke="#869099" stroke-miterlimit="10" stroke-width="2"/>
<path d="M67.5 6.2a.4.4 0 0 0-.4-.3H17.7a.4.4 0 0 0-.4.3l-3 11.6a.4.4 0 0 0 .1.4l.3.2H70l.3-.2a.4.4 0 0 0 .1-.4zM13.97 42.32l.007-4.5 56.82.1-.007 4.5z" fill="#b1b6bb" stroke="#869099" stroke-miterlimit="10" stroke-width="2"/>
<path fill="#fff" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M21.334 32.244l.016-8.9 5.92.01-.016 8.9z"/>
<path fill="#869099" d="M20.04 33.45l.003-1.5 8.4.015-.002 1.5z"/>
<path d="M24.3 23.1a.4.4 0 0 0-.4.4v8.3a.45.45 0 1 0 .9 0v-8.3a.4.4 0 0 0-.5-.4z" fill="#869099"/>
<path d="M27 27.3h-5.6a.45.45 0 0 0 0 .9H27a.45.45 0 0 0 0-.9z" fill="#869099"/>
<path fill="#9dfcb2" d="M32 19.6H52.8l-10.4-7.2L32 19.6"/>
<path d="M53 19.2L42.6 12a.4.4 0 0 0-.5 0l-10.4 7.2a.412.412 0 0 0 .2.8h20.8a.427.427 0 0 0 .3-.8z" fill="#869099"/>
<path fill="#f5f6f7" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M34.2 19.8v22.6h16.3l.1-22.5-8.2-5.6-8.2 5.5z"/>
<path fill="#e8e9ea" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M21.034 9.808l.012-6.8 4.1.007-.012 6.8z"/>
<path fill="#b1b6bb" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M20.038 3l.004-2 5.96.01-.004 2z"/>
<path fill="#fff" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M39.366 32.244l.015-8.9 5.92.01-.014 8.9z"/>
<path fill="#fff" d="M43.7 30.1v-5.2h-2.2l2.2 5.2"/>
<path fill="#869099" d="M38.172 33.55l.003-1.5 8.4.015-.003 1.5z"/>
<path d="M42.4 23.2a.4.4 0 0 0-.4.4v8.3a.45.45 0 1 0 .9 0v-8.3a.4.4 0 0 0-.5-.4z" fill="#869099"/>
<path d="M45.1 27.3h-5.6a.45.45 0 0 0 0 .9h5.6a.45.45 0 0 0 0-.9z" fill="#869099"/>
<path fill="#fff" stroke="#869099" stroke-miterlimit="10" stroke-width="2" d="M57.497 32.244l.016-8.9 5.92.01-.016 8.9z"/>
<path fill="#869099" d="M56.204 33.55l.002-1.5 8.4.015-.002 1.5z"/>
<path d="M60.5 23.2a.4.4 0 0 0-.4.4v8.3a.45.45 0 1 0 .9 0v-8.3a.4.4 0 0 0-.5-.4z" fill="#869099"/>
<path d="M63.2 27.4h-5.6a.45.45 0 0 0 0 .9h5.6a.45.45 0 0 0 0-.9zM5.4 33.1h1.2v9.56H5.4z" fill="#869099"/>
<path d="M1.4 28.4c-1.1 2.7-.4 5.6 2 8a3.5 3.5 0 0 0 5 0c2.4-2.4 3.1-5.3 2-8a4.9 4.9 0 0 0-9 0z" fill="#b1b6bb"/>
<path d="M10.5 28.4A4.8 4.8 0 0 0 6 25.3v12.2a3.5 3.5 0 0 0 2.5-1.1c2.3-2.4 3.1-5.3 2-8z" fill="#cdd1d4"/>
<path d="M1.4 28.4c-1.1 2.7-.4 5.6 2 8a3.5 3.5 0 0 0 5 0c2.4-2.4 3.1-5.3 2-8a4.9 4.9 0 0 0-9 0z" fill="none" stroke="#869099" stroke-miterlimit="10" stroke-width="2"/>
</svg>
</div><!--demo-->
<div class="demoOverlay demo2-2 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCancel typeWarning h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--no-->
</div>
</div><!--row-->
<div class="row">
<div class="mdColOffset4 mdCol18 description">
<div class="mdCol13 mdColOffset3 backgroundLowerlight descContain">
<p>One of the primary tenets of Fluid Motion is being sure to retain context for the viewer. Users are constantly scanning an interface in an event called saccade- we create spatial maps of where things are and how to find them. Fluid motion helps guide the user by keeping elements as consistent as possible during an interaction.</p>
<p>In recent years, employers have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website works the same way.</p>
<p>Changing the placement of elements in the UI completely upon interaction asks our users to readjust to an entirely new view. This lack of context is an anti-pattern: we’re not gracefully showing the user what changed and why.</p>
<p>The associations of space, time and placement helps an interaction seem more fluid and intuitive.</p>
</div><!--explainContain-->
<div class="mdCol20 positionAbsolute sectTitle">
<h1 class="typeCaps typeEmphasize plm mls">Context-Shifting</h1>
</div>
<div>
</div><!--row-->
</section>
<section id="section3">
<div class="row">
<div class="mdColOffset4 mdCol18 positionRelative">
<div class="mdCol2">
<div class="number">03</div>
</div>
<div class="mdCol4 mdColOffset15 positionAbsolute">
<div class="hrSide"></div>
</div>
<div class="mdCol13 mdColOffset3 positionAbsolute backgroundLowerlight explainContain typeLowlight">
Entrances and Exits must be consistent. Entrances start from a 90% scale so as not to be too jarring for the user.
</div><!--explainContain-->
<div class="mdCol6 yes">
<div class="demo">
<svg class="entranceyes" xmlns="http://www.w3.org/2000/svg" width="484" height="436.5" viewBox="0 0 484 436.5">
<g class="charts">
<g id="top-red">
<path d="M156.5 109.8L76.4 107c1.5-43.4 38.1-78.4 80.1-78.4v81.2z" fill="#b51d02"/>
<path d="M157.1 109.8l81-5.7a81.2 81.2 0 0 1-162 11.3 67.6 67.6 0 0 1-.1-8.5z" fill="#e13009"/>
<path d="M157.1 109.8l38.2-71.7a79.9 79.9 0 0 1 42.9 66z" fill="#fbb100"/>
<path d="M156.5 109.8V28.6a79.8 79.8 0 0 1 39.1 9.5z" fill="#fdd167"/>
</g>
<g id="bottom-red">
<path d="M156.5 328.5l-74.7-31.7a80.2 80.2 0 0 1 74.7-49.5v81.2z" fill="#b51d02"/>
<path d="M156.9 328.5l71.6-38.1a81.2 81.2 0 1 1-143.3 76.2c-12-22.5-13-46.4-3-69.8z" fill="#e13009"/>
<path d="M156.9 328.5l19.6-78.8a79.1 79.1 0 0 1 52 40.7z" fill="#fbb100"/>
<path d="M156.5 328.5v-81.2a74.9 74.9 0 0 1 19.6 2.4z" fill="#fdd167"/>
</g>
<g id="top-green">
<path d="M375.8 109.8L307.7 154a81.2 81.2 0 0 1 23.8-112.3c13.8-8.9 26.4-12.8 42.8-13.1z" fill="#004f3a"/>
<path d="M375.8 109.8l48.9 64.8a81.2 81.2 0 0 1-113.7-16l-3.3-4.6z" fill="#10a75f"/>
<path d="M375.8 109.8l41.8-69.6a81.2 81.2 0 0 1 27.8 111.4 75.6 75.6 0 0 1-20.7 23z" fill="#20c063"/>
<path d="M375.5 109.8l-1-81.2a81.5 81.5 0 0 1 42.8 11.6z" fill="#2ed975"/>
</g>
<g id="bottom-green">
<path d="M375.5 328.3l-27.6 76.1a81 81 0 0 1-48.4-103.8c11.7-32.2 41-53.3 76-53.3v81z" fill="#004f3a"/>
<path d="M375.8 328.3l62 52.1c-22.5 26.8-56.8 36-89.7 24z" fill="#10a75f"/>
<path d="M375.8 328.3l52.1-62c34.1 28.6 38.6 80 10 114.1z" fill="#20c063"/>
<path d="M375.5 328.3v-81c20 0 36.5 5.9 52.1 18.9z" fill="#2ed975"/>
</g>
</g>
<path fill="none" stroke="#b1b6bb" stroke-miterlimit="10" d="M483.5 436H.5V.5h483V436zM265.8 436V.5M48 436V.5M.5 218.3h483"/>
<path id="bbone" fill="#cdd1d4" d="M14.5 22.7h20v176.6h-20z"/>
<path id="bbtwo" fill="#cdd1d4" d="M14.5 239.5h20v176.6h-20z"/>
</svg>
</div><!--demo-->
<div class="demoOverlay demo3-1 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCheck typeGoodIndicator h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--yes-->
<div class="mdCol6 no">
<div class="demo">
<svg class="entranceno" xmlns="http://www.w3.org/2000/svg" width="484" height="436.5" viewBox="0 0 484 436.5">
<g class="charts2">
<g id="top-red">
<path d="M156.5 109.8L76.4 107c1.5-43.4 38.1-78.4 80.1-78.4v81.2z" fill="#b51d02"/>
<path d="M157.1 109.8l81-5.7a81.2 81.2 0 0 1-162 11.3 67.6 67.6 0 0 1-.1-8.5z" fill="#e13009"/>
<path d="M157.1 109.8l38.2-71.7a79.9 79.9 0 0 1 42.9 66z" fill="#fbb100"/>
<path d="M156.5 109.8V28.6a79.8 79.8 0 0 1 39.1 9.5z" fill="#fdd167"/>
</g>
<g id="bottom-red">
<path d="M156.5 328.5l-74.7-31.7a80.2 80.2 0 0 1 74.7-49.5v81.2z" fill="#b51d02"/>
<path d="M156.9 328.5l71.6-38.1a81.2 81.2 0 1 1-143.3 76.2c-12-22.5-13-46.4-3-69.8z" fill="#e13009"/>
<path d="M156.9 328.5l19.6-78.8a79.1 79.1 0 0 1 52 40.7z" fill="#fbb100"/>
<path d="M156.5 328.5v-81.2a74.9 74.9 0 0 1 19.6 2.4z" fill="#fdd167"/>
</g>
<g id="top-green">
<path d="M375.8 109.8L307.7 154a81.2 81.2 0 0 1 23.8-112.3c13.8-8.9 26.4-12.8 42.8-13.1z" fill="#004f3a"/>
<path d="M375.8 109.8l48.9 64.8a81.2 81.2 0 0 1-113.7-16l-3.3-4.6z" fill="#10a75f"/>
<path d="M375.8 109.8l41.8-69.6a81.2 81.2 0 0 1 27.8 111.4 75.6 75.6 0 0 1-20.7 23z" fill="#20c063"/>
<path d="M375.5 109.8l-1-81.2a81.5 81.5 0 0 1 42.8 11.6z" fill="#2ed975"/>
</g>
<g id="bottom-green">
<path d="M375.5 328.3l-27.6 76.1a81 81 0 0 1-48.4-103.8c11.7-32.2 41-53.3 76-53.3v81z" fill="#004f3a"/>
<path d="M375.8 328.3l62 52.1c-22.5 26.8-56.8 36-89.7 24z" fill="#10a75f"/>
<path d="M375.8 328.3l52.1-62c34.1 28.6 38.6 80 10 114.1z" fill="#20c063"/>
<path d="M375.5 328.3v-81c20 0 36.5 5.9 52.1 18.9z" fill="#2ed975"/>
</g>
</g>
<path fill="none" stroke="#b1b6bb" stroke-miterlimit="10" d="M483.5 436H.5V.5h483V436zM265.8 436V.5M48 436V.5M.5 218.3h483"/>
<path id="bbone2" fill="#cdd1d4" d="M14.5 22.7h20v176.6h-20z"/>
<path id="bbtwo2" fill="#cdd1d4" d="M14.5 239.5h20v176.6h-20z"/>
</svg>
</div><!--demo-->
<div class="demoOverlay demo3-2 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCancel typeWarning h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--no-->
</div>
</div><!--row-->
<div class="row">
<div class="mdColOffset4 mdCol18 description">
<div class="mdCol13 mdColOffset3 backgroundLowerlight descContain">
<p>Fluid motion has standardized entrances and exits. Sometimes it’s difficult to have one element turn into another. In these cases, we will use a slight of hand. The element can come into view, and start at 90% scale while fully bringing up opacity, so that it subtly looks like it “grew” from the place that it came from.</p>
<p>We use common easings across all platforms for entrances and exits.</p>
<p>The cubic bezier for entrance is: <br>
<code><span class="nt">cubic-bezier</span><span class="s">(0.39, 0.575, 0.565, 1)</span></code>;</p>
<p>The cubic bezier for exit is:<br>
<code><span class="nt">cubic-bezier</span><span class="s">(0.47, 0, 0.745, 0.715)</span></code>;</p>
<pre><code><span class="na">Math.easeOutSine</span> = <span class="nt">function</span> (<span class="s">t, b, c, d</span>) {
return <span class="sd">c * Math.sin(t/d * (Math.PI/2)) + b</span>;
};
</pre></code>
<pre><code><span class="na">Math.easeInSine</span> = <span class="nt">function</span> (<span class="s">t, b, c, d</span>) {
return <span class="sd">-c * Math.cos(t/d * (Math.PI/2)) + c + b</span>;
};
</code></pre>
</div><!--explainContain-->
<div class="mdCol20 positionAbsolute sectTitle">
<h1 class="typeCaps typeEmphasize plm mls">Entrances and Exits</h1>
</div>
<div>
</div><!--row-->
</section>
<section id="section4">
<div class="row">
<div class="mdColOffset4 mdCol18 positionRelative">
<div class="mdCol2">
<div class="number">04</div>
</div>
<div class="mdCol4 mdColOffset15 positionAbsolute">
<div class="hrSide"></div>
</div>
<div class="mdCol13 mdColOffset3 positionAbsolute backgroundLowerlight explainContain typeLowlight">
Fluid Motion ensures that best practices for interaction and fluid movement are used. Touch events don't wait 300MS for secondary action.
</div>
<div class="mdCol6 yes">
<div class="demo">
<button class="btn btnPrimary devYesStart">Start</button>
<svg class="dev-yes" xmlns="http://www.w3.org/2000/svg" width="300.6" height="245.2" viewBox="0 0 300.6 245.2">
<defs>
<clipPath id="clip-path" transform="translate(.1 -28)">
<path fill="none" d="M47 253.1h19.4v16.19H47z"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(.1 -28)">
<path d="M33.9 121.1a1.2 1.2 0 1 0-2.3 0c0 4.4-.7 10.2-.5 12.9a28.9 28.9 0 0 0 1 5.6l.5 1 .5-1a28.9 28.9 0 0 0 1.1-5.6c.2-2.7-.4-8.5-.3-12.9z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(.1 -28)">
<path d="M48 151.8a1.2 1.2 0 1 0 1.3-1.9c-3.6-2.5-8.1-6.3-10.3-7.7a28.9 28.9 0 0 0-5.2-2.3h-1.1l.5 1a28.9 28.9 0 0 0 4 4.1c2.1 1.5 7.2 4.3 10.8 6.8z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(.1 -28)">
<path d="M15.8 149a1.2 1.2 0 1 0 1.2 2c3.8-2.3 9.1-4.7 11.3-6.2a28.9 28.9 0 0 0 4.3-3.8l.6-.9H32a28.9 28.9 0 0 0-5.3 2c-2.4 1.1-7.1 4.7-10.9 6.9z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(.1 -28)">
<path d="M81.6 139.8a1.2 1.2 0 1 0-.6-2.2c-4.2 1.2-10 2.2-12.5 3.1a28.9 28.9 0 0 0-5.1 2.5l-.8.8 1.1.2a28.9 28.9 0 0 0 5.7-.5c2.5-.5 8-2.7 12.2-3.9z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-6" transform="translate(.1 -28)">
<path d="M56.1 162a1.2 1.2 0 1 0 2.2.7c1.4-4.2 3.8-9.5 4.4-12.1a28.9 28.9 0 0 0 .8-5.6l-.2-1.1-.8.8a28.9 28.9 0 0 0-2.8 5c-.9 2.4-2.2 8.2-3.6 12.3z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-7" transform="translate(.1 -28)">
<path d="M49.7 130.3a1.2 1.2 0 1 0-1.6 1.7c3.2 3 7.1 7.4 9.2 9a28.9 28.9 0 0 0 4.8 3l1.1.3-.4-1a28.9 28.9 0 0 0-3.4-4.6c-1.7-1.9-6.4-5.4-9.7-8.4z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-8" transform="translate(.1 -28)">
<rect x="28.8" y="28" width="39.3" height="49.69" rx="6.1" ry="6.1" fill="none"/>
</clipPath>
</defs>
<g id="bars2">
<path fill="#20c063" d="M196.1 97h83v25h-83z"/>
<path fill="#00d2a9" d="M196.1 124h69v25h-69z"/>
</g>
<g id="bars3">
<path fill="#20c063" d="M196.1 192h35v25h-35z"/>
<path fill="#00d2a9" d="M196.1 219h25v26h-25z"/>
</g>
<g id="house">
<path fill="#be574d" d="M47.1 225.1h20.4v16.19H47.1z"/>
<path fill="#3f5069" d="M47.5 225.8h21.9v.9H47l.5-.9z"/>
<path fill="#5a698a" d="M69.4 225.8H47.5l-7.5-14h19.6l9.8 14z"/>
<path fill="#3f5069" d="M29.6 226.7L40 211.8l10.4 14.9H29.6z"/>
<path fill="#f27350" d="M48.7 226.6L40 214.2l-8.7 12.4h-.1v14.7h17.6v-14.7h-.1z"/>
<path fill="#83694e" d="M37.3 231.9h5.4v9.33h-5.4z"/>
<path fill="#a48a6c" d="M38 232.7h4v8.6h-4z"/>
<circle cx="41.8" cy="236.6" r=".5" fill="#83694e"/>
<path fill="#7fb141" d="M31.2 241h36.3v1.34H31.2z"/>
<path d="M39.5 219.8h.5a2 2 0 0 1 2 2v2.5h-4.5v-2.5a2 2 0 0 1 2-2z" fill="#155e71"/>
<path d="M40.9 224.3h-2.4v-1.8a1.2 1.2 0 0 1 1.2-1.2 1.2 1.2 0 0 1 1.2 1.2v1.8z" fill="#5d9e9d"/>
<path fill="#155e71" d="M51.9 229.4h4.5v7.05h-4.5zM60 229.4h4.5v7.05H60z"/>
<path fill="#f27350" d="M54.4 210.2h3.2v4.46h-3.2z"/>
<path fill="#be574d" d="M54.3 209.6h3.6v.66h-3.6zM54.4 211h3.2v.3h-3.2zM54.4 211.9h3.2v.3h-3.2zM54.4 212.7h3.2v.3h-3.2zM54.4 213.6h3.2v.3h-3.2z"/>
<path fill="#be574d" d="M55.8 214.7h-.3v-1.1h1.1v-.6l-1.6.1v-1.2h1.5v-.6h-1v-1.1h.3v.8h1v1.2h-1.5v.5h1.6v1.2h-1.1v.8z"/>
<g clip-path="url(#clip-path)" fill="#b0d364">
<path d="M64.9 240.6a1.1 1.1 0 0 0-.9.5c-.1-.8-.8-1.8-1.5-1.4l-1.1.7c-.5-1.4-1.7-2.6-3.1-2.1a4.8 4.8 0 0 0-3.2 2.7 3 3 0 0 0-1.6-1.3 1.2 1.2 0 0 0-1.2.3 2.4 2.4 0 1 0-4.4 1.9h7.4l5.6-.2h5a1.1 1.1 0 0 0-1-1.1z"/>
<circle cx="58.2" cy="241.6" r="3.6"/>
<circle cx="62.2" cy="242" r="2.6"/>
<circle cx="53.4" cy="241.5" r="2.2"/>
<circle cx="64.9" cy="242.1" r="1.7"/>
</g>
<path fill="#4c8684" d="M60.9 231h2.7v5.47h-2.7zM52.8 231h2.7v5.47h-2.7z"/>
<path fill="#be574d" d="M60 232.1h4.5v.89H60zM51.9 232.1h4.5v.89h-4.5z"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M74.8 242.1h.8v-1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3 3" d="M75.6 238v-16"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M75.6 220.5V219h1.5M77.4 219h1.5v-1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3.35 3.35" d="M77 214.8l-10.6-15.1"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M65.5 198.7l-.9-1.2h-1.5M63.1 197.5h-1.5v-4h-1.5M58.1 193.5h-1.5v4h-1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3 3" d="M53.1 197.5h-15"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M37.1 197.5h-1.4l-.9 1.2"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3.39 3.39" d="M32.9 201.1l-10.7 15.3"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M21.4 218.2l-1 1.3h2.2v1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3 3" d="M22.6 223v16"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M22.4 240.6v1.5h1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="2.91 2.91" d="M27.1 242.5h45"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M73.1 242.5h2"/>
</g>
<g id="wind">
<path d="M43.8 142.3h1.1a3.2 3.2 0 0 1-.1-.8 3.4 3.4 0 0 1 3.5-3.3 3.5 3.5 0 0 1 3.5 2.7 5.6 5.6 0 0 1 4.5-.2 3.5 3.5 0 0 1 6.8 1.1l1.1-.3a2.5 2.5 0 0 1 2.2 1.2 4.4 4.4 0 0 1 4.1-1 4.7 4.7 0 0 1 3.2 4.7 2.7 2.7 0 0 1 3.3 1.1 2.8 2.8 0 0 1 .3 1l.7-.2a1.5 1.5 0 0 1 1.1 2.4H39.2a5.2 5.2 0 0 1-1.1-3.2 5.5 5.5 0 0 1 5.7-5.4z" fill="#03ed86" fill-rule="evenodd"/>
<path d="M29.6 146.2h3.2v-33.7h-1.1c-.4 10.9-1.9 22.9-2.1 33.7z" fill="#72a4a5" fill-rule="evenodd"/>
<path d="M39.8 146.2h-7v-33.7h1.1c.4 10.9 2.5 22.9 2.7 33.7h3.3z" fill="#8eb9bc" fill-rule="evenodd"/>
<g id="prop2">
<path d="M32.6 112.6l-.5-1a28.9 28.9 0 0 1-1-5.6c-.2-2.6.5-8.5.5-12.9a1.1 1.1 0 0 1 1.2-1.2l-.2 20.7z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M32.6 112.6l.5-1a28.9 28.9 0 0 0 1.1-5.6c.2-2.6-.3-8.5-.3-12.9a1.1 1.1 0 0 0-1.1-1.2l-.2 20.7z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-2)">
<path fill="#ff7857" d="M31.262 90.02l3.8.04-.04 3.82-3.8-.04z"/>
<path fill="#f74a27" d="M32.86 90.036l3.8.04-.04 3.82-3.8-.04z"/>
</g>
<path d="M32.8 111.8h1.1a28.9 28.9 0 0 1 5.2 2.3c2.3 1.3 6.7 5.2 10.3 7.7a1.1 1.1 0 0 1 .3 1.6l-17-11.8z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M32.8 111.8l.5 1a28.9 28.9 0 0 0 4 4.1c2.1 1.7 7.2 4.5 10.8 7a1.1 1.1 0 0 0 1.7-.3l-17-11.8z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-3)">
<path fill="#ff7857" d="M52.2 123.155l-2.168 3.12-3.137-2.18 2.17-3.12z"/>
<path fill="#f74a27" d="M51.247 124.474l-2.17 3.12-3.136-2.18 2.17-3.12z"/>
</g>
<path d="M33.2 112l-.6.9a28.9 28.9 0 0 1-4.3 3.8c-2.2 1.5-7.5 4-11.3 6.2a1.1 1.1 0 0 1-1.6-.4L33.2 112z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M33.2 112h-1.1a28.9 28.9 0 0 0-5.3 2c-2.4 1.2-7.1 4.7-10.9 6.9a1.1 1.1 0 0 0-.5 1.6L33.2 112z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-4)">
<path fill="#ff7857" d="M14.76 124.89l-1.946-3.265 3.28-1.956 1.947 3.263z"/>
<path fill="#f74a27" d="M13.867 123.493l-1.946-3.264 3.282-1.957 1.946 3.264z"/>
</g>
</g>
<path d="M31.8 110.2a2.508 2.508 0 0 1 2 4.6l-2-4.6z" fill="#476265" fill-rule="evenodd"/>
<path d="M32.3 111.3a1.32 1.32 0 0 1 1.1 2.4l-1.1-2.4z" fill="#9abeb8" fill-rule="evenodd"/>
<path d="M33.8 114.8a2.508 2.508 0 1 1-2-4.6l2 4.6z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M33.4 113.7a1.32 1.32 0 0 1-1.1-2.4l1.1 2.4z" fill="#d5ede0" fill-rule="evenodd"/>
<path d="M59.6 150.9h3.2v-33.7h-1.1c-.4 10.9-1.9 22.9-2.1 33.7z" fill="#72a4a5" fill-rule="evenodd"/>
<path d="M69.8 150.9h-7v-33.7h1.1c.4 10.9 2.5 22.9 2.7 33.7h3.3z" fill="#8eb9bc" fill-rule="evenodd"/>
<g id="prop1">
<path d="M62.7 116l.8-.8a28.9 28.9 0 0 1 5.1-2.5c2.5-.9 8.3-1.9 12.5-3.1a1.1 1.1 0 0 1 1.5.8L62.7 116z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M62.7 116l1.1.2a28.9 28.9 0 0 0 5.7-.5c2.6-.5 8-2.7 12.3-3.9a1.1 1.1 0 0 0 .9-1.4l-20 5.6z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-5)">
<path fill="#ff7857" d="M83.787 108.206l1.035 3.657-3.676 1.04-1.035-3.656z"/>
<path fill="#f74a27" d="M84.28 109.796l1.035 3.656-3.676 1.04-1.036-3.656z"/>
</g>
<path d="M63.5 115.9l.2 1.1a28.9 28.9 0 0 1-.8 5.6c-.6 2.6-3.1 7.9-4.4 12.1a1.1 1.1 0 0 1-1.5.8l6.5-19.6z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M63.5 115.9l-.8.8a28.9 28.9 0 0 0-2.8 5c-1 2.4-2.3 8.2-3.7 12.4a1.1 1.1 0 0 0 .7 1.5l6.5-19.6z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-6)">
<path fill="#ff7857" d="M57.845 137.787l-3.608-1.193 1.2-3.627 3.607 1.194z"/>
<path fill="#f74a27" d="M56.212 137.233l-3.608-1.193 1.2-3.627 3.607 1.193z"/>
</g>
<path d="M63.3 116.4l-1.1-.3a28.9 28.9 0 0 1-4.8-3c-2.1-1.6-5.9-6.1-9.2-9a1.1 1.1 0 0 1-.1-1.7l15.2 14z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M63.3 116.4l-.4-1a28.9 28.9 0 0 0-3.4-4.6c-1.8-1.9-6.5-5.5-9.7-8.4a1.1 1.1 0 0 0-1.7 0l15.2 14z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-7)">
<path fill="#ff7857" d="M45.764 102.327l2.58-2.788 2.804 2.595-2.582 2.788z"/>
<path fill="#f74a27" d="M46.83 101.105l2.582-2.788 2.803 2.595-2.582 2.788z"/>
</g>
</g>
<path d="M64.7 114.5a2.516 2.516 0 0 1-3.8 3.3l3.8-3.3z" fill="#476265" fill-rule="evenodd"/>
<path d="M63.8 115.3a1.312 1.312 0 0 1-2 1.7l2-1.7z" fill="#9abeb8" fill-rule="evenodd"/>
<path d="M60.9 117.8a2.516 2.516 0 1 1 3.8-3.3l-3.8 3.3z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M61.8 117a1.312 1.312 0 0 1 2-1.7l-2 1.7z" fill="#d5ede0" fill-rule="evenodd"/>
<path d="M47.5 147.1a2.4 2.4 0 0 1 1.9 3.7H25a4.215 4.215 0 0 1 5.6-6.3 5.6 5.6 0 0 1 10.8-.5 3.8 3.8 0 0 1 5.6 3.1h.5z" fill="#05ae69" fill-rule="evenodd"/>
<path d="M48.2 149.7c.9 0 .2-2.5 1.6-.8a2.4 2.4 0 0 1-.4 1.9h-2.5c-.1-.4.2-1.1 1.3-1.1zM43.4 147.1a.3.3 0 0 1 .2.4c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.4zM42 147.7a.3.3 0 0 1 .3.3c0 .2-.1.1-.3.1s-.3.1-.3-.1a.3.3 0 0 1 .3-.3zM42.7 146a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3zM46.7 149.4a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3z" fill="#228959" fill-rule="evenodd"/>
<path d="M29.7 149.3c.5-.1 1.5.3 1.4-.8a4.8 4.8 0 0 1-.1-.8c0-1.4 1.6 1.5 3 1.7s1.2-1.2 3.6-.9a1.2 1.2 0 0 0 1.4-1.1c-.6-.4-1.2-3.4.4-3.4s1.4-1.3 2.1.1a5.2 5.2 0 0 0-2.4 3.3 4.2 4.2 0 0 0 0 1.1c.4 1 1.9 1.3 2.3.4s1.5-.1 2.2-.3 1.1-2.2 2.2-1a2.5 2.5 0 0 0-.9 3.2H25a4.2 4.2 0 0 1-.9-1.6c.3-.2 1.9 1 2.8.9s1.1-.6 2.8-.8zm9.3-1.9zM29.9 145.2a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3zM28.7 145.2a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3z" fill="#228959" fill-rule="evenodd"/>
</g>
<path fill="none" stroke="#009245" stroke-miterlimit="10" opacity=".2" d="M0 170l300.6-.2"/>
<g id="bars1">
<path fill="#20c063" d="M196.1 1h77v23h-77z"/>
<path fill="#00d2a9" d="M196.1 26h80v23h-80z"/>
</g>
<g id="percent" fill="#fff" font-family="Post Grotesk" font-weight="700">
<text transform="translate(258.5 16)" font-size="11.29">
%
</text>
<text transform="translate(261.3 41.1)" font-size="11.29">
%
</text>
<text transform="translate(262.3 113.8)" font-size="11.73">
%
</text>
<text transform="translate(248.5 140.2)" font-size="11.73">
%
</text>
<text transform="translate(214.9 207.9)" font-size="11.73">
%
</text>
<text transform="translate(203.3 235.2)" font-size="11.73">
%
</text>
</g>
<g id="text" fill="#cdd1d4">
<g id="copy-3" data-name="copy">
<path d="M95.8 20.6h69.3v8.39H95.8zM95.8 6.8h49.3v8.39H95.8zM95.8 34.4h69.3v8.39H95.8z"/>
</g>
<g id="copy-2" data-name="copy">
<path d="M96 115.7h67.6v8.72H96zM96 101.4h48.1v8.72H96zM96 130h55.8v8.72H96z"/>
</g>
<g id="copy">
<path d="M96 213.6h57.6v8.72H96zM96 199.3h68.7v8.72H96zM96 227.9h68.5v8.72H96z"/>
</g>
</g>
<g id="washer" opacity=".96">
<rect x="28.9" width="39.3" height="49.69" rx="6.1" ry="6.1" fill="#fff"/>
<path d="M48.6 38.3a11.9 11.9 0 1 1 11.9-11.9 11.9 11.9 0 0 1-11.9 11.9z" fill="#5c6972"/>
<path d="M48.6 16.6a9.8 9.8 0 1 1-9.8 9.8 9.8 9.8 0 0 1 9.8-9.8m0-4.1a13.9 13.9 0 1 0 13.9 13.9 13.9 13.9 0 0 0-13.9-13.9z" fill="#e8e9ea"/>
<path d="M48.6 35.5a9.1 9.1 0 1 1 9.1-9.1 9.1 9.1 0 0 1-9.1 9.1z" fill="#5c6972" opacity=".75"/>
<path d="M48.6 17.9a8.4 8.4 0 1 1-8.4 8.4 8.5 8.5 0 0 1 8.4-8.4m0-1.4a9.8 9.8 0 1 0 9.8 9.8 9.8 9.8 0 0 0-9.8-9.8z" fill="#869099"/>
<g clip-path="url(#clip-path-8)" fill="#e8e9ea">
<path d="M24.1 44h52v1h-52zM24.1 43h52v1h-52zM24.1 8h52v2h-52z"/>
</g>
<circle cx="50.7" cy="4.7" r="1.2" fill="#cdd1d4"/>
<circle cx="47.2" cy="4.7" r="1.2" fill="#cdd1d4"/>
<path fill="#cdd1d4" d="M33.4 3.2h8.2v2.86h-8.2zM56 3.2h8.2v2.86H56z"/>
<path fill="#f5f6f7" d="M33.5 46.8h30.3v2.86H33.5z"/>
<path d="M57.2 24.5c0 2.6-1.5 4.7-3.3 4.7s-2.5-2.1-2.5-4.7.7-4.7 2.5-4.7 3.3 2.1 3.3 4.7z" fill="#b1b6bb"/>
<path id="_24501840" data-name="24501840" d="M63.4 10.7h-.1l-.7 1.8h-1.9l-.2.2.2.2h2.2l.6-1.5.6 1.5h1.7l-1.2 1h-.1l.4 1.5-1.3-.9h-.2l-1.3.9.4-1.4v.2h-.4l-.5 1.8a.2.2 0 0 0 .1.2h.2l1.6-1 1.6 1h.3l-.5-1.9 1.4-1.3h-2l-.7-1.8h-.2z" fill="#20c063"/>
</g>
<path fill="none" stroke="#009245" stroke-miterlimit="10" opacity=".2" d="M.5 73.2l300 .5"/>
</svg>
</div><!--demo-->
<div class="demoOverlay demo4-1 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCheck typeGoodIndicator h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--yes-->
<div class="mdCol6 no">
<div class="demo">
<button class="btn btnPrimary devNoStart">Start</button>
<svg class="dev-no" xmlns="http://www.w3.org/2000/svg" width="300.6" height="245.2" viewBox="0 0 300.6 245.2">
<defs>
<clipPath id="clip-path" transform="translate(.1 -28)">
<path fill="none" d="M47 253.1h19.4v16.19H47z"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(.1 -28)">
<path d="M33.9 121.1a1.2 1.2 0 1 0-2.3 0c0 4.4-.7 10.2-.5 12.9a28.9 28.9 0 0 0 1 5.6l.5 1 .5-1a28.9 28.9 0 0 0 1.1-5.6c.2-2.7-.4-8.5-.3-12.9z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(.1 -28)">
<path d="M48 151.8a1.2 1.2 0 1 0 1.3-1.9c-3.6-2.5-8.1-6.3-10.3-7.7a28.9 28.9 0 0 0-5.2-2.3h-1.1l.5 1a28.9 28.9 0 0 0 4 4.1c2.1 1.5 7.2 4.3 10.8 6.8z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(.1 -28)">
<path d="M15.8 149a1.2 1.2 0 1 0 1.2 2c3.8-2.3 9.1-4.7 11.3-6.2a28.9 28.9 0 0 0 4.3-3.8l.6-.9H32a28.9 28.9 0 0 0-5.3 2c-2.4 1.1-7.1 4.7-10.9 6.9z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(.1 -28)">
<path d="M81.6 139.8a1.2 1.2 0 1 0-.6-2.2c-4.2 1.2-10 2.2-12.5 3.1a28.9 28.9 0 0 0-5.1 2.5l-.8.8 1.1.2a28.9 28.9 0 0 0 5.7-.5c2.5-.5 8-2.7 12.2-3.9z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-6" transform="translate(.1 -28)">
<path d="M56.1 162a1.2 1.2 0 1 0 2.2.7c1.4-4.2 3.8-9.5 4.4-12.1a28.9 28.9 0 0 0 .8-5.6l-.2-1.1-.8.8a28.9 28.9 0 0 0-2.8 5c-.9 2.4-2.2 8.2-3.6 12.3z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-7" transform="translate(.1 -28)">
<path d="M49.7 130.3a1.2 1.2 0 1 0-1.6 1.7c3.2 3 7.1 7.4 9.2 9a28.9 28.9 0 0 0 4.8 3l1.1.3-.4-1a28.9 28.9 0 0 0-3.4-4.6c-1.7-1.9-6.4-5.4-9.7-8.4z" fill="none" clip-rule="evenodd"/>
</clipPath>
<clipPath id="clip-path-8" transform="translate(.1 -28)">
<rect x="28.8" y="28" width="39.3" height="49.69" rx="6.1" ry="6.1" fill="none"/>
</clipPath>
</defs>
<g id="bars2n">
<path fill="#20c063" d="M196.1 97h83v25h-83z"/>
<path fill="#00d2a9" d="M196.1 124h69v25h-69z"/>
</g>
<g id="bars3n">
<path fill="#20c063" d="M196.1 192h35v25h-35z"/>
<path fill="#00d2a9" d="M196.1 219h25v26h-25z"/>
</g>
<g id="housen">
<path fill="#be574d" d="M47.1 225.1h20.4v16.19H47.1z"/>
<path fill="#3f5069" d="M47.5 225.8h21.9v.9H47l.5-.9z"/>
<path fill="#5a698a" d="M69.4 225.8H47.5l-7.5-14h19.6l9.8 14z"/>
<path fill="#3f5069" d="M29.6 226.7L40 211.8l10.4 14.9H29.6z"/>
<path fill="#f27350" d="M48.7 226.6L40 214.2l-8.7 12.4h-.1v14.7h17.6v-14.7h-.1z"/>
<path fill="#83694e" d="M37.3 231.9h5.4v9.33h-5.4z"/>
<path fill="#a48a6c" d="M38 232.7h4v8.6h-4z"/>
<circle cx="41.8" cy="236.6" r=".5" fill="#83694e"/>
<path fill="#7fb141" d="M31.2 241h36.3v1.34H31.2z"/>
<path d="M39.5 219.8h.5a2 2 0 0 1 2 2v2.5h-4.5v-2.5a2 2 0 0 1 2-2z" fill="#155e71"/>
<path d="M40.9 224.3h-2.4v-1.8a1.2 1.2 0 0 1 1.2-1.2 1.2 1.2 0 0 1 1.2 1.2v1.8z" fill="#5d9e9d"/>
<path fill="#155e71" d="M51.9 229.4h4.5v7.05h-4.5zM60 229.4h4.5v7.05H60z"/>
<path fill="#f27350" d="M54.4 210.2h3.2v4.46h-3.2z"/>
<path fill="#be574d" d="M54.3 209.6h3.6v.66h-3.6zM54.4 211h3.2v.3h-3.2zM54.4 211.9h3.2v.3h-3.2zM54.4 212.7h3.2v.3h-3.2zM54.4 213.6h3.2v.3h-3.2z"/>
<path fill="#be574d" d="M55.8 214.7h-.3v-1.1h1.1v-.6l-1.6.1v-1.2h1.5v-.6h-1v-1.1h.3v.8h1v1.2h-1.5v.5h1.6v1.2h-1.1v.8z"/>
<g clip-path="url(#clip-path)" fill="#b0d364">
<path d="M64.9 240.6a1.1 1.1 0 0 0-.9.5c-.1-.8-.8-1.8-1.5-1.4l-1.1.7c-.5-1.4-1.7-2.6-3.1-2.1a4.8 4.8 0 0 0-3.2 2.7 3 3 0 0 0-1.6-1.3 1.2 1.2 0 0 0-1.2.3 2.4 2.4 0 1 0-4.4 1.9h7.4l5.6-.2h5a1.1 1.1 0 0 0-1-1.1z"/>
<circle cx="58.2" cy="241.6" r="3.6"/>
<circle cx="62.2" cy="242" r="2.6"/>
<circle cx="53.4" cy="241.5" r="2.2"/>
<circle cx="64.9" cy="242.1" r="1.7"/>
</g>
<path fill="#4c8684" d="M60.9 231h2.7v5.47h-2.7zM52.8 231h2.7v5.47h-2.7z"/>
<path fill="#be574d" d="M60 232.1h4.5v.89H60zM51.9 232.1h4.5v.89h-4.5z"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M74.8 242.1h.8v-1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3 3" d="M75.6 238v-16"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M75.6 220.5V219h1.5M77.4 219h1.5v-1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3.35 3.35" d="M77 214.8l-10.6-15.1"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M65.5 198.7l-.9-1.2h-1.5M63.1 197.5h-1.5v-4h-1.5M58.1 193.5h-1.5v4h-1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3 3" d="M53.1 197.5h-15"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M37.1 197.5h-1.4l-.9 1.2"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3.39 3.39" d="M32.9 201.1l-10.7 15.3"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M21.4 218.2l-1 1.3h2.2v1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="3 3" d="M22.6 223v16"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M22.4 240.6v1.5h1.5"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" stroke-dasharray="2.91 2.91" d="M27.1 242.5h45"/>
<path fill="none" stroke="#00c767" stroke-miterlimit="10" d="M73.1 242.5h2"/>
</g>
<g id="windn">
<path d="M43.8 142.3h1.1a3.2 3.2 0 0 1-.1-.8 3.4 3.4 0 0 1 3.5-3.3 3.5 3.5 0 0 1 3.5 2.7 5.6 5.6 0 0 1 4.5-.2 3.5 3.5 0 0 1 6.8 1.1l1.1-.3a2.5 2.5 0 0 1 2.2 1.2 4.4 4.4 0 0 1 4.1-1 4.7 4.7 0 0 1 3.2 4.7 2.7 2.7 0 0 1 3.3 1.1 2.8 2.8 0 0 1 .3 1l.7-.2a1.5 1.5 0 0 1 1.1 2.4H39.2a5.2 5.2 0 0 1-1.1-3.2 5.5 5.5 0 0 1 5.7-5.4z" fill="#03ed86" fill-rule="evenodd"/>
<path d="M29.6 146.2h3.2v-33.7h-1.1c-.4 10.9-1.9 22.9-2.1 33.7z" fill="#72a4a5" fill-rule="evenodd"/>
<path d="M39.8 146.2h-7v-33.7h1.1c.4 10.9 2.5 22.9 2.7 33.7h3.3z" fill="#8eb9bc" fill-rule="evenodd"/>
<g id="prop2">
<path d="M32.6 112.6l-.5-1a28.9 28.9 0 0 1-1-5.6c-.2-2.6.5-8.5.5-12.9a1.1 1.1 0 0 1 1.2-1.2l-.2 20.7z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M32.6 112.6l.5-1a28.9 28.9 0 0 0 1.1-5.6c.2-2.6-.3-8.5-.3-12.9a1.1 1.1 0 0 0-1.1-1.2l-.2 20.7z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-2)">
<path fill="#ff7857" d="M31.262 90.02l3.8.04-.04 3.82-3.8-.04z"/>
<path fill="#f74a27" d="M32.86 90.036l3.8.04-.04 3.82-3.8-.04z"/>
</g>
<path d="M32.8 111.8h1.1a28.9 28.9 0 0 1 5.2 2.3c2.3 1.3 6.7 5.2 10.3 7.7a1.1 1.1 0 0 1 .3 1.6l-17-11.8z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M32.8 111.8l.5 1a28.9 28.9 0 0 0 4 4.1c2.1 1.7 7.2 4.5 10.8 7a1.1 1.1 0 0 0 1.7-.3l-17-11.8z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-3)">
<path fill="#ff7857" d="M52.2 123.155l-2.168 3.12-3.137-2.18 2.17-3.12z"/>
<path fill="#f74a27" d="M51.247 124.474l-2.17 3.12-3.136-2.18 2.17-3.12z"/>
</g>
<path d="M33.2 112l-.6.9a28.9 28.9 0 0 1-4.3 3.8c-2.2 1.5-7.5 4-11.3 6.2a1.1 1.1 0 0 1-1.6-.4L33.2 112z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M33.2 112h-1.1a28.9 28.9 0 0 0-5.3 2c-2.4 1.2-7.1 4.7-10.9 6.9a1.1 1.1 0 0 0-.5 1.6L33.2 112z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-4)">
<path fill="#ff7857" d="M14.76 124.89l-1.946-3.265 3.28-1.956 1.947 3.263z"/>
<path fill="#f74a27" d="M13.867 123.493l-1.946-3.264 3.282-1.957 1.946 3.264z"/>
</g>
</g>
<path d="M31.8 110.2a2.508 2.508 0 0 1 2 4.6l-2-4.6z" fill="#476265" fill-rule="evenodd"/>
<path d="M32.3 111.3a1.32 1.32 0 0 1 1.1 2.4l-1.1-2.4z" fill="#9abeb8" fill-rule="evenodd"/>
<path d="M33.8 114.8a2.508 2.508 0 1 1-2-4.6l2 4.6z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M33.4 113.7a1.32 1.32 0 0 1-1.1-2.4l1.1 2.4z" fill="#d5ede0" fill-rule="evenodd"/>
<path d="M59.6 150.9h3.2v-33.7h-1.1c-.4 10.9-1.9 22.9-2.1 33.7z" fill="#72a4a5" fill-rule="evenodd"/>
<path d="M69.8 150.9h-7v-33.7h1.1c.4 10.9 2.5 22.9 2.7 33.7h3.3z" fill="#8eb9bc" fill-rule="evenodd"/>
<g id="prop1">
<path d="M62.7 116l.8-.8a28.9 28.9 0 0 1 5.1-2.5c2.5-.9 8.3-1.9 12.5-3.1a1.1 1.1 0 0 1 1.5.8L62.7 116z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M62.7 116l1.1.2a28.9 28.9 0 0 0 5.7-.5c2.6-.5 8-2.7 12.3-3.9a1.1 1.1 0 0 0 .9-1.4l-20 5.6z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-5)">
<path fill="#ff7857" d="M83.787 108.206l1.035 3.657-3.676 1.04-1.035-3.656z"/>
<path fill="#f74a27" d="M84.28 109.796l1.035 3.656-3.676 1.04-1.036-3.656z"/>
</g>
<path d="M63.5 115.9l.2 1.1a28.9 28.9 0 0 1-.8 5.6c-.6 2.6-3.1 7.9-4.4 12.1a1.1 1.1 0 0 1-1.5.8l6.5-19.6z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M63.5 115.9l-.8.8a28.9 28.9 0 0 0-2.8 5c-1 2.4-2.3 8.2-3.7 12.4a1.1 1.1 0 0 0 .7 1.5l6.5-19.6z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-6)">
<path fill="#ff7857" d="M57.845 137.787l-3.608-1.193 1.2-3.627 3.607 1.194z"/>
<path fill="#f74a27" d="M56.212 137.233l-3.608-1.193 1.2-3.627 3.607 1.193z"/>
</g>
<path d="M63.3 116.4l-1.1-.3a28.9 28.9 0 0 1-4.8-3c-2.1-1.6-5.9-6.1-9.2-9a1.1 1.1 0 0 1-.1-1.7l15.2 14z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M63.3 116.4l-.4-1a28.9 28.9 0 0 0-3.4-4.6c-1.8-1.9-6.5-5.5-9.7-8.4a1.1 1.1 0 0 0-1.7 0l15.2 14z" fill="#72a4a5" fill-rule="evenodd"/>
<g clip-path="url(#clip-path-7)">
<path fill="#ff7857" d="M45.764 102.327l2.58-2.788 2.804 2.595-2.582 2.788z"/>
<path fill="#f74a27" d="M46.83 101.105l2.582-2.788 2.803 2.595-2.582 2.788z"/>
</g>
</g>
<path d="M64.7 114.5a2.516 2.516 0 0 1-3.8 3.3l3.8-3.3z" fill="#476265" fill-rule="evenodd"/>
<path d="M63.8 115.3a1.312 1.312 0 0 1-2 1.7l2-1.7z" fill="#9abeb8" fill-rule="evenodd"/>
<path d="M60.9 117.8a2.516 2.516 0 1 1 3.8-3.3l-3.8 3.3z" fill="#8eb9bc" fill-rule="evenodd"/>
<path d="M61.8 117a1.312 1.312 0 0 1 2-1.7l-2 1.7z" fill="#d5ede0" fill-rule="evenodd"/>
<path d="M47.5 147.1a2.4 2.4 0 0 1 1.9 3.7H25a4.215 4.215 0 0 1 5.6-6.3 5.6 5.6 0 0 1 10.8-.5 3.8 3.8 0 0 1 5.6 3.1h.5z" fill="#05ae69" fill-rule="evenodd"/>
<path d="M48.2 149.7c.9 0 .2-2.5 1.6-.8a2.4 2.4 0 0 1-.4 1.9h-2.5c-.1-.4.2-1.1 1.3-1.1zM43.4 147.1a.3.3 0 0 1 .2.4c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.4zM42 147.7a.3.3 0 0 1 .3.3c0 .2-.1.1-.3.1s-.3.1-.3-.1a.3.3 0 0 1 .3-.3zM42.7 146a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3zM46.7 149.4a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3z" fill="#228959" fill-rule="evenodd"/>
<path d="M29.7 149.3c.5-.1 1.5.3 1.4-.8a4.8 4.8 0 0 1-.1-.8c0-1.4 1.6 1.5 3 1.7s1.2-1.2 3.6-.9a1.2 1.2 0 0 0 1.4-1.1c-.6-.4-1.2-3.4.4-3.4s1.4-1.3 2.1.1a5.2 5.2 0 0 0-2.4 3.3 4.2 4.2 0 0 0 0 1.1c.4 1 1.9 1.3 2.3.4s1.5-.1 2.2-.3 1.1-2.2 2.2-1a2.5 2.5 0 0 0-.9 3.2H25a4.2 4.2 0 0 1-.9-1.6c.3-.2 1.9 1 2.8.9s1.1-.6 2.8-.8zm9.3-1.9zM29.9 145.2a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3zM28.7 145.2a.3.3 0 0 1 .2.3c0 .2-.1.1-.2.1s-.2.1-.2-.1a.3.3 0 0 1 .2-.3z" fill="#228959" fill-rule="evenodd"/>
</g>
<path fill="none" stroke="#009245" stroke-miterlimit="10" opacity=".2" d="M0 170l300.6-.2"/>
<g id="bars1n">
<path fill="#20c063" d="M196.1 1h77v23h-77z"/>
<path fill="#00d2a9" d="M196.1 26h80v23h-80z"/>
</g>
<g id="percentn" fill="#fff" font-family="Post Grotesk" font-weight="700">
<text transform="translate(258.5 16)" font-size="11.29">
%
</text>
<text transform="translate(261.3 41.1)" font-size="11.29">
%
</text>
<text transform="translate(262.3 113.8)" font-size="11.73">
%
</text>
<text transform="translate(248.5 140.2)" font-size="11.73">
%
</text>
<text transform="translate(214.9 207.9)" font-size="11.73">
%
</text>
<text transform="translate(203.3 235.2)" font-size="11.73">
%
</text>
</g>
<g id="textn" fill="#cdd1d4">
<g id="copy-3" data-name="copy">
<path d="M95.8 20.6h69.3v8.39H95.8zM95.8 6.8h49.3v8.39H95.8zM95.8 34.4h69.3v8.39H95.8z"/>
</g>
<g id="copy-2" data-name="copy">
<path d="M96 115.7h67.6v8.72H96zM96 101.4h48.1v8.72H96zM96 130h55.8v8.72H96z"/>
</g>
<g id="copy">
<path d="M96 213.6h57.6v8.72H96zM96 199.3h68.7v8.72H96zM96 227.9h68.5v8.72H96z"/>
</g>
</g>
<g id="washern" opacity=".96">
<rect x="28.9" width="39.3" height="49.69" rx="6.1" ry="6.1" fill="#fff"/>
<path d="M48.6 38.3a11.9 11.9 0 1 1 11.9-11.9 11.9 11.9 0 0 1-11.9 11.9z" fill="#5c6972"/>
<path d="M48.6 16.6a9.8 9.8 0 1 1-9.8 9.8 9.8 9.8 0 0 1 9.8-9.8m0-4.1a13.9 13.9 0 1 0 13.9 13.9 13.9 13.9 0 0 0-13.9-13.9z" fill="#e8e9ea"/>
<path d="M48.6 35.5a9.1 9.1 0 1 1 9.1-9.1 9.1 9.1 0 0 1-9.1 9.1z" fill="#5c6972" opacity=".75"/>
<path d="M48.6 17.9a8.4 8.4 0 1 1-8.4 8.4 8.5 8.5 0 0 1 8.4-8.4m0-1.4a9.8 9.8 0 1 0 9.8 9.8 9.8 9.8 0 0 0-9.8-9.8z" fill="#869099"/>
<g clip-path="url(#clip-path-8)" fill="#e8e9ea">
<path d="M24.1 44h52v1h-52zM24.1 43h52v1h-52zM24.1 8h52v2h-52z"/>
</g>
<circle cx="50.7" cy="4.7" r="1.2" fill="#cdd1d4"/>
<circle cx="47.2" cy="4.7" r="1.2" fill="#cdd1d4"/>
<path fill="#cdd1d4" d="M33.4 3.2h8.2v2.86h-8.2zM56 3.2h8.2v2.86H56z"/>
<path fill="#f5f6f7" d="M33.5 46.8h30.3v2.86H33.5z"/>
<path d="M57.2 24.5c0 2.6-1.5 4.7-3.3 4.7s-2.5-2.1-2.5-4.7.7-4.7 2.5-4.7 3.3 2.1 3.3 4.7z" fill="#b1b6bb"/>
<path id="_24501840" data-name="24501840" d="M63.4 10.7h-.1l-.7 1.8h-1.9l-.2.2.2.2h2.2l.6-1.5.6 1.5h1.7l-1.2 1h-.1l.4 1.5-1.3-.9h-.2l-1.3.9.4-1.4v.2h-.4l-.5 1.8a.2.2 0 0 0 .1.2h.2l1.6-1 1.6 1h.3l-.5-1.9 1.4-1.3h-2l-.7-1.8h-.2z" fill="#20c063"/>
</g>
<path fill="none" stroke="#009245" stroke-miterlimit="10" opacity=".2" d="M.5 73.2l300 .5"/>
</svg>
</div><!--demo-->
<div class="demoOverlay demo4-2 backgroundMidnight">
<div class="backgroundControls mts iconContainer pas">
<i class="iconCancel typeWarning h5 mlxs"></i>
</div>
<div class="play typeLowlight">▶</div>
</div><!--demoOverlay-->
</div><!--no-->
</div>
</div><!--row-->
<div class="row">
<div class="mdColOffset4 mdCol18 description">
<div class="mdCol13 mdColOffset3 backgroundLowerlight descContain">
<p>Fluid motion is not just the way things move but how things move. A beautiful animation can become unsuccessful when there are unnecessary repaints and elements are not properly hardware accelerated. This involves thinking about the element itself along with the way we animate it. Animations should be performed with transforms and opacity where possible. Animated elements must be hardware accelerated (see the docs for our <code><span class="nt">.accelerate</span></code> class).</p>
<p>Mobile web pages should specify <code><span class="nt">initial-scale</span>=<span class="s">1.0</span></code> in the meta tag so that the device is not waiting the required 300MS on the secondary tap before calling action. Interaction for touch events must either start from a larger touch-target (40px x 40px or greater) or use <code><span class="nt">@media</span>(<span class="s">pointer:coarse</span>)</code> when support increases. </p>
<p>SVG should be used in place of jpg, png, or gif for animated elements due to their small filesize when properly designed for performance. The exception to this rule being an element that has to grow many scales higher than its original state, which is a poor use case for SVG due to the cost of that rerender. SVG must be properly optimized with tools like SVGOMG, SVGO, or Peter Coolinridge's SVG Editor.</p>
</div><!--explainContain-->
<div class="mdCol20 positionAbsolute sectTitle">
<h1 class="typeCaps typeEmphasize plm mls">Developer Standards</h1>
</div>
<div>
</div><!--row-->
</section>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=18'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/DrawSVGPlugin.min.js'></script>
<script >// morphing-yes
var button1 = document.querySelector(".rr1 #button"),
button2 = document.querySelector(".rr2 #buttonn");
TweenMax.set("#r-2", {
visibility: "visible"
});
TweenMax.set(".clock", {
opacity: 0
});
function morphYes() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo1-1", 0.2, {opacity:0, ease:Sine.easeIn});
tl.to(button1, 0.2, {scale:1.2, opacity:0.2, fill:"hsl(+=0, +=50%, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut});
tl.to(button1, 0.3, {scale:1, opacity:1, fill:"hsl(+=0, +=0, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut});
tl.add("begin");
tl.to(".rr1 #fake_text-3", 0.1, {opacity:0, scale:0, ease:Sine.easeIn}, "begin");
tl.staggerFromTo(".rr1 #rachel_smith path", 0.1, {opacity:0, scale:0, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Sine.easeOut}, 0.07, "begin+=0.2");
tl.fromTo(".rr1 #hr", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin+=0.2");
tl.fromTo(".rr1 #top_text", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin+=0.2");
tl.to(".rr1 #input_field-3", 0.4, {morphSVG:{shape:"#top_text-2"}, fill: "#cdd1d4", stroke: "none", ease:Linear.easeNone}, "begin+=0.2");
tl.to(".rr1 #fake_text-2", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin+=0.2");
tl.to(".rr1 #input_field-2", 0.4, {morphSVG:{shape:"#fake_text-6"}, fill: "#cdd1d4", stroke: "none", ease:Linear.easeNone}, "begin+=0.2");
tl.fromTo(".rr1 #fake_text-5", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin+=0.2");
tl.to(".rr1 #fake_text", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin+=0.2");
tl.to(".rr1 #input_field", 0.4, {morphSVG:{shape:"#fake_text-4"}, fill: "#cdd1d4", stroke: "none", ease:Linear.easeNone}, "begin+=0.2");
//button
tl.to(button1, 0.2, {scale:1.2, opacity:0.2, fill:"hsl(+=0, +=50%, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut}, "begin+=1.5");
tl.to(button1, 0.3, {scale:1, opacity:1, fill:"hsl(+=0, +=0, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut}, "begin+=1.7");
tl.to(".demoOverlay.demo1-1", 0.4, {opacity:0.97, ease:Sine.easeOut});
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var morphYesPlay = new TimelineMax({
paused: true
});
morphYesPlay.add(morphYes());
//this button kicks off
$(".demo1-1").on("click", function(e) {
e.preventDefault();
morphYesPlay.restart();
});
// morphing-no
TweenMax.set("#r-2n", {
visibility: "visible"
});
TweenMax.set("#input_field-3n, #input_field-2n, #input_fieldn", {
transformStyle:"preserve-3d", transformPerspective:200
});
function morphNo() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo1-2", 0.2, {opacity:0, ease:Sine.easeIn});
tl.to(button2, 0.2, {scale:1.2, opacity:0.2, fill:"hsl(+=0, +=50%, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut});
tl.to(button2, 0.3, {scale:1, opacity:1, fill:"hsl(+=0, +=0, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut});
tl.add("begin2");
tl.to(".rr2 #fake_text-3n", 0.1, {opacity:0, scale:0, ease:Sine.easeIn}, "begin2");
tl.staggerFromTo(".rr2 #rachel_smithn path", 0.1, {opacity:0, scale:0, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Sine.easeOut}, 0.07, "begin2+=0.2");
tl.fromTo(".rr2 #hrn", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin2+=0.2");
tl.fromTo(".rr2 #top_textn", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin2+=0.2");
tl.to("#input_field-3n", 0.4, {morphSVG:{shape:"#top_text-2n"}, fill: "#cdd1d4", stroke: "none", rotationY:180, ease:Back.easeOut}, "begin2+=0.2");
tl.to("#fake_text-2n", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin2+=0.2");
tl.to("#input_field-2n", 0.4, {morphSVG:{shape:"#fake_text-6n"}, fill: "#cdd1d4", stroke: "none", rotationY:180, ease:Back.easeOut}, "begin2+=0.2");
tl.fromTo(".rr2 #fake_text-5n", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin2+=0.2");
tl.to(".rr2 #fake_textn", 0.4, {opacity:0, scale:0.9, transformOrigin:"50% 50%", ease:Power3.easeIn}, "begin2+=0.2");
tl.to("#input_fieldn", 0.4, {morphSVG:{shape:"#fake_text-4n"}, fill: "#cdd1d4", stroke: "none", rotationY:180, ease:Back.easeOut}, "begin2+=0.2");
//button
tl.to(button2, 0.2, {scale:1.2, opacity:0.2, fill:"hsl(+=0, +=50%, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut}, "begin2+=1.5");
tl.to(button2, 0.3, {scale:1, opacity:1, fill:"hsl(+=0, +=0, +=0)", transformOrigin: "50% 50%", ease:Power3.easeOut}, "begin2+=1.7");
tl.to(".demoOverlay.demo1-2", 0.4, {opacity:0.97, ease:Sine.easeOut});
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var morphNoPlay = new TimelineMax({
paused: true
});
morphNoPlay.add(morphNo());
//this button kicks off
$(".demo1-2").on("click", function(e) {
e.preventDefault();
morphNoPlay.restart();
});
// context-yes
TweenMax.set(".house", {
visibility: "visible"
});
function contextYes() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo2-1", 0.2, {opacity:0, ease:Sine.easeIn});
tl.add("begin3", "+=0.3");
tl.to(".markerPrimary.m1", 0.15, {background: "white", borderRadius:2, width:200, height:65, marginTop:-22, borderColor: "#ddd", ease:Sine.easeOut}, "begin3");
tl.to(".markerstem", 0.3, {background: "white", width:8, height:8, borderColor: "#ddd", ease:Sine.easeOut}, "begin3");
tl.to(".movet1", 0.3, {color: "#3b4144", y:-45, x:10, ease:Sine.easeOut}, "begin3");
tl.staggerFromTo(".house path", 0.4, {drawSVG:"0%", opacity:0, scale:0.95, transformOrigin:"50% 50%"}, {drawSVG:"100%", opacity:1, scale:1, transformOrigin:"50% 50%", ease:Sine.easeOut}, 0.01, "begin3+=0.1");
tl.fromTo(".houseBk", 0.3, {opacity: 0}, {opacity:1, ease:Sine.easeOut}, "begin3+=0.1");
tl.fromTo(".bar1", 0.3, {opacity: 0}, {opacity:1, ease:Sine.easeOut}, "begin3+=0.2");
tl.fromTo(".bar2", 0.3, {opacity: 0}, {opacity:1, ease:Sine.easeOut}, "begin3+=0.3");
tl.to(".demoOverlay.demo2-1", 0.4, {opacity:0.97, ease:Sine.easeOut}, "begin3+=1.5");
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var contextYesPlay = new TimelineMax({
paused: true
});
contextYesPlay.add(contextYes());
//this button kicks off
$(".demo2-1").on("click", function(e) {
e.preventDefault();
contextYesPlay.restart();
});
// context-no
function contextNo() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo2-2", 0.2, {opacity:0, ease:Sine.easeIn});
tl.add("begin4", "+=0.3");
tl.fromTo(".house2", 0.1, {display:"none"}, {display:"block", ease:Linear.easeNone}, "begin4");
tl.fromTo(".fakemodal", 0.1, {display:"none"},{display:"block", ease:Linear.easeNone}, "begin4");
tl.to(".demoOverlay.demo2-2", 0.4, {opacity:0.97, ease:Sine.easeOut}, "begin4+=1.25");
tl.to(".house2", 0.1, {display:"none", ease:Linear.easeNone}, "begin4+=3");
tl.to(".fakemodal", 0.1, {display:"none", ease:Linear.easeNone}, "begin4+=3");
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var contextNoPlay = new TimelineMax({
paused: true
});
contextNoPlay.add(contextNo());
//this button kicks off
$(".demo2-2").on("click", function(e) {
e.preventDefault();
contextNoPlay.restart();
});
// entrance-yes
function entranceYes() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo3-1", 0.2, {opacity:0, ease:Sine.easeIn});
tl.add("begin5", "+=0.3");
tl.staggerFromTo(".charts g", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%", rotation:50}, {opacity:1, scale:1, transformOrigin:"50% 50%", rotation:0, ease:Sine.easeOut}, 0.1, "begin5");
tl.staggerFromTo("#bbone", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 0%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Sine.easeOut}, 0.1, "begin5");
tl.staggerFromTo("#bbtwo", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 0%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Sine.easeOut}, 0.1, "begin5+=0.1");
tl.to(".demoOverlay.demo3-1", 0.4, {opacity:0.97, ease:Sine.easeOut}, "begin5+=1.25");
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var entranceYesPlay = new TimelineMax({
paused: true
});
entranceYesPlay.add(entranceYes());
//this button kicks off
$(".demo3-1").on("click", function(e) {
e.preventDefault();
entranceYesPlay.restart();
});
// entrance-no
function entranceNo() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo3-2", 0.2, {opacity:0, ease:Sine.easeIn});
tl.add("begin6", "+=0.3");
tl.staggerFromTo(".charts2 g", 0.5, {opacity:0, scale:0, transformOrigin:"50% 50%", rotation:500}, {opacity:1, scale:1, transformOrigin:"50% 50%", rotation:0, ease:Bounce.easeOut}, 0.1, "begin6");
tl.staggerFromTo("#bbone2", 0.5, {opacity:0, scale:0, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Elastic.easeOut}, 0.1, "begin6");
tl.staggerFromTo("#bbtwo2", 0.5, {opacity:0, scale:0, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Elastic.easeOut}, 0.1, "begin6+=0.1");
tl.to(".demoOverlay.demo3-2", 0.4, {opacity:0.97, ease:Sine.easeOut}, "begin6+=1.25");
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var entranceNoPlay = new TimelineMax({
paused: true
});
entranceNoPlay.add(entranceNo());
//this button kicks off
$(".demo3-2").on("click", function(e) {
e.preventDefault();
entranceNoPlay.restart();
});
// dev-yes
function devYes() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo4-1", 0.2, {opacity:0, ease:Sine.easeIn});
tl.to(".devYesStart", 0.05, {opacity:0.9, background:"#ff7857", borderColor:"#ff7857", scale:1.15, transformOrigin:"50% 50%", ease:Sine.easeOut}, "+=0.75");
tl.to(".devYesStart", 0.1, {opacity:0, scale:1, transformOrigin:"50% 50%", ease:Sine.easeIn}, "+=0.1");
tl.fromTo(".dev-yes", 0.1, {opacity:0}, {opacity:1, ease:Sine.easeOut}, "+=0.1");
tl.add("begin7");
tl.staggerFromTo("#washer", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin7");
tl.staggerFromTo("#wind", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin7+=0.1");
tl.staggerFromTo("#house", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin7+=0.2");
tl.staggerFromTo("#bars1 path", 0.5, {opacity:0, scale:0, transformOrigin:"0% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin7");
tl.staggerFromTo("#bars2 path", 0.5, {opacity:0, scale:0, transformOrigin:"0% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin7+=0.2");
tl.staggerFromTo("#bars3 path", 0.5, {opacity:0, scale:0, transformOrigin:"0% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin7+=0.4");
tl.staggerFromTo("#percent text", 0.5, {opacity:0, transformOrigin:"0% 50%"}, {opacity:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.15, "begin7+=0.2");
tl.staggerFromTo("#text path", 0.5, {opacity:0, transformOrigin:"0% 50%"}, {opacity:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.15, "begin7");
tl.to(".demoOverlay.demo4-1", 0.4, {opacity:0.97, ease:Sine.easeOut}, "begin7+=2.25");
//tl.timeScale(1.2);
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var devYesPlay = new TimelineMax({
paused: true
});
devYesPlay.add(devYes());
//this button kicks off
$(".demo4-1").on("click", function(e) {
e.preventDefault();
devYesPlay.restart();
});
// dev-no
function devNo() {
var tl = new TimelineMax();
tl.to(".demoOverlay.demo4-2", 0.2, {opacity:0, ease:Sine.easeIn});
tl.to(".devNoStart", 0.05, {opacity:0.9, background:"#ff7857", borderColor:"#ff7857", scale:1.15, transformOrigin:"50% 50%", ease:Sine.easeOut}, "+=0.75");
tl.to(".devNoStart", 0.1, {opacity:0, scale:1, transformOrigin:"50% 50%", ease:Sine.easeIn}, "+=0.1");
tl.add("begin8", "+=1");
tl.fromTo(".dev-no", 0.1, {opacity:0}, {opacity:1, ease:Sine.easeOut}, "begin8");
tl.staggerFromTo("#washern", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin8");
tl.staggerFromTo("#windn", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin8+=0.1");
tl.staggerFromTo("#housen", 0.5, {opacity:0, scale:0.9, transformOrigin:"50% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin8+=0.2");
tl.staggerFromTo("#bars1n path", 0.5, {opacity:0, scale:0, transformOrigin:"0% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin8");
tl.staggerFromTo("#bars2n path", 0.5, {opacity:0, scale:0, transformOrigin:"0% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin8+=0.2");
tl.staggerFromTo("#bars3n path", 0.5, {opacity:0, scale:0, transformOrigin:"0% 50%"}, {opacity:1, scale:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.1, "begin8+=0.4");
tl.staggerFromTo("#percentn text", 0.5, {opacity:0, transformOrigin:"0% 50%"}, {opacity:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.15, "begin8+=0.2");
tl.staggerFromTo("#textn path", 0.5, {opacity:0, transformOrigin:"0% 50%"}, {opacity:1, transformOrigin:"0% 50%", ease:Sine.easeOut}, 0.15, "begin8");
tl.to(".demoOverlay.demo4-2", 0.4, {opacity:0.97, ease:Sine.easeOut}, "begin8+=2.25");
//tl.timeScale(1.2);
return tl;
}
//create a timeline but initially pause it so that we can control it via click
var devNoPlay = new TimelineMax({
paused: true
});
devNoPlay.add(devNo());
//this button kicks off
$(".demo4-2").on("click", function(e) {
e.preventDefault();
devNoPlay.restart();
});
$(function() {
var wrapper = $("#wrapper"),
$menu = $("nav");
$menu.on("click", "a", function() {
var $this = $(this),
href = $this.attr("href"),
topY = $(href).offset().top;
TweenMax.to($(window), 1, {
scrollTo: {
y: topY,
autoKill: true
},
ease: Power3.easeOut
});
return false;
});
});
//# sourceURL=pen.js
</script>
</body></html>
