Soss Door Width

index.html

<div class="row clearfix">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300"  xml:space="preserve">
    
    <defs>
        <mask id="Mask">
              <rect x="0" y="35" width="100" height="60" fill="fff" />
       </mask>
        <clipPath id="myClipPath" > 
            <rect x="0" y="35" width="200" height="60" fill="fff" > 
                <animate attributeType = "XML"
                         attributeName="x"
                         from="-100" to="106"
                         dur="4s"
                         repeatCount="2" />
            </rect>
        </clipPath>
    </defs>
    


	
		
<!-- DOOR  -->
    
    <g id="door">
	
		<polygon id="isodoor" fill="#CFCFCF" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		114.894,18.867 119.678,18.108 205.864,37.579 205.915,260.942 201.579,262.057 115.246,242.168"/>
	
		<polygon id="edge" fill="#666666" stroke="#000000" stroke-width="0.2551" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		201.682,38.75 205.771,37.573 205.948,260.466 201.682,261.513"/>
	
		<polygon id="top" fill="#666666" stroke="#000000" stroke-width="0.2551" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		201.598,38.592 115.032,18.902 119.379,17.874 205.481,37.448"/>
</g>
    
    
<!--  RULER    -->
    
<g id="ruler">
	<polygon id="bottom_mark" fill="#FFF" points="116,53.43 116,71.9 200,91.86 200,71.9 	"/>
    <polygon id="mark" clip-path="url(#myClipPath)" fill="#FF0000" points="116,53.43 116,71.9 200,91.86 200,71.9 	"/>
    
	<path id="theRuler" d="M114.91,72.96l86.79,20.22l0.01-21.65L114.93,51.6L114.91,72.96z M116.69,71.83l0.03-18.15l2.57,0.54
		l0.05,1.86l1.64,0.39l-0.05-1.86l3.07,0.73l0.04,1.86l1.65,0.39l-0.05-1.86l3.07,0.73l0.12,4.73l1.64,0.39l-0.12-4.73l2.95,0.62
		l0.05,1.79l1.64,0.39l-0.07-1.8l3.1,0.67l0.04,1.86l1.65,0.39l-0.05-1.86l3.07,0.73l0.12,4.73l1.65,0.39l-0.12-4.73l3.07,0.73
		l0.05,1.87l1.64,0.39l-0.05-1.86l3.07,0.73l0.05,1.86l1.65,0.39l-0.05-1.86l3.07,0.73l0.12,4.73l1.64,0.39l-0.12-4.73l3.07,0.73
		l0.05,1.87l1.64,0.39l-0.05-1.86l3.07,0.72l0.05,1.87l1.64,0.39L168,65.62l3.07,0.73l0.12,4.73l1.65,0.39l-0.12-4.73l3.07,0.73
		l0.05,1.87l1.64,0.39l-0.05-1.86l3.07,0.73l0.05,1.87l1.64,0.39l-0.04-1.86l3.07,0.73l0.12,4.73l1.64,0.39l-0.12-4.73l3.08,0.73
		l0.05,1.87l1.64,0.39l-0.05-1.87l3.07,0.73l0.05,1.86l1.65,0.39l-0.05-1.86l3.68,0.84l-0.03,17.76L116.69,71.83z"/>
	<polygon id="arrow" fill="#FF0000" points="135.68,97.37 119.27,109.32 127.16,111.06 127.4,122.42 145.3,126.65 145.05,115.34 
		152.58,117.17 	"/>
</g>
    
    
<!--  ULTRALATCH    -->
    
<g id="ultralatch">
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M191.392,145.91c0,0,1.243-0.157,1.607-1.221c0.367-1.065,0.391-2.8-0.681-2.975c-0.922-0.151-9.469-1.523-10.804-1.674
		c-1.106-0.126-1.796-0.16-2.307,0.247c-0.512,0.407-1.476,2.065,0.608,2.788c-0.119-0.066,0.986,1.019,2.087,3.233
		c1.1,2.212,1.51,2.936,2.228,4.185c0.718,1.25,1.729,2.605,2.332,3.275c0.737,0.818,0.802,2.044,0.551,4.244
		c-0.125,1.118-0.457,1.973-0.217,3.106c0.239,1.133,0.805,1.565,1.376,1.938c0.574,0.371,1.38,1.385,2.391,1.684
		c1.01,0.299,1.582,0.213,1.582,0.213s-0.105,1.921,0.414,2.225c0.519,0.307,1.334,0.152,1.334,0.152s-1.093-2.273-1.065-2.517
		c0.027-0.242,0.95-0.261,1.586-0.987c0.637-0.727,1.271-1.453,1.491-3.395c0.221-1.941-0.187-3.217-0.617-3.757
		s-1.044-2.826-1.103-3.812c-0.264-0.381-2.887-1.156-2.887-1.156s-0.549-1.845-0.454-3.253
		C190.938,147.045,191.392,145.91,191.392,145.91z"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M193.489,152.801c0,0-0.662,0.033-0.945,0.26c-0.266,0.211-0.49,0.566-0.525,0.625"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M193.227,160.139c-0.13,1.889-0.721,2.531-1.553,3.064c-0.83,0.532-3.3-0.23-3.3-0.23s1.293,1.664,3.392,1.555
		c2.096-0.111,3.277-2.123,3.57-3.439"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M192.777,162.993c0,0-0.32,1.011-0.067,1.329"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M190.315,146.469c0,0-0.489,3.884-0.352,5.105c0.14,1.221,0.296,1.756,1.006,2.935c0.956,1.542,0.507,3.058,0.463,3.667
		c-0.046,0.61-0.051,2.465-0.67,3.238c-0.614,0.768-1.417,1.432-2.721,1.081"/>
	
		<line fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="180.687" y1="143.362" x2="189.357" y2="145.238"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M190.872,145.772c-0.552-0.376-0.88-1.221-0.773-2.155c0.084-0.747,0.428-1.375,0.881-1.722"/>
	
		<polyline fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
		205.103,161.886 205.145,164.34 202.967,165.55 202.957,152.951 205.106,152.442 205.062,157.108 	"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M204.405,156.582c0,0-0.522,0.047-0.707,0.563c-0.202,0.567-0.138,3.785,0.015,4.044l0.195-0.041"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M204.36,156.748c0,0,1.4,0.133,1.794,0.202s0.366,0.573,0.388,0.728c0.021,0.152-0.032,3.329-0.032,3.329s-0.112,0.284-0.726,0.256
		c-0.461-0.021-1.991-0.26-1.991-0.26"/>
	
		<path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M204.153,157.697l1.034,0.065c0,0,1.073,0.085,1.181-0.219"/>
	<ellipse fill="#9B9B9B" cx="203.981" cy="154.525" rx="0.379" ry="0.92"/>
	<ellipse fill="#9B9B9B" cx="204.361" cy="261.513" rx="0.379" ry="0.92"/>
</g>
    
    
<!--  OUTER    -->
    
    <g id="outer">
	<rect x="-0.115" y="-0.146" fill="none" stroke="#FF0000" stroke-width="0" stroke-miterlimit="10" width="300" height="300"/>
</g>
    <text transform="matrix(1 0 0 1 10 290)" fill="#FFFFFF" font-family="'Digital-7Italic'" font-size="18" class="count">Door Width</text>
    
    
</svg>
</div>
<div class="row clearfix">
<!-- <button id="play">play</button> -->
	

</div>

script.js

var $arrow = $("#arrow");

// Bottom ruler now moved up, higher on door
// Arrow animation runs in endless loop 

// The easeInOut makes it soften the return in both directions.
 tl = new TimelineMax();

tl.fromTo( $arrow, 2, { y:"-14.5px", opacity:"0.3"}, { y:"-4px", x:"44px", opacity:"1", ease:Sine.easeInOut, repeat:2, yoyo:true } );

var playBtn = $( `#play` );

playBtn.onclick = function() {
    tl.paused( !TouchList.paused() );
    playBtn.innerHTML = tl.paused() ? "play" : "pause";
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

soss-door-width.markdown

Soss Door Width

Using GSAP to animate measuring a door. This series will be broken into three animations. For positioning purposes, it is easier to do them all at once.

A Pen by Greg Miller on CodePen.

License.

style.css

svg {
    background: #401616;
}
body {
    background-color: #401616;
    overflow: hidden;
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100vh;
}