Soss Door Weight

index.html

<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">
    
    <!-- SCALE COMPONENTS -->
    <g id="Scale">
        <path id="container" fill-rule="evenodd" clip-rule="evenodd" fill="#A8A8A8" stroke="#000000" stroke-miterlimit="10" d="M202.24,289.69
		l-107-0.609v-19.516l13.472-22.365c0,0,1.945-5.604,8.444-6.119c10.067-0.8,55.785-0.106,61.667-0.106s8.334,5.529,8.334,5.529
		l15.083,22.741V289.69z" />

        <path id="sc_top" fill-rule="evenodd" clip-rule="evenodd" fill="#878787" stroke="#777777"
            stroke-width="0.5669" stroke-miterlimit="10" d="
		M103.985,266.206l11.27-17.811c0,0,1.626-4.463,7.064-4.873c8.421-0.638,46.667-0.086,51.587-0.086
		c4.921,0,6.972,4.404,6.972,4.404l12.617,18.11" />

        <path id="sc_front" fill-rule="evenodd" clip-rule="evenodd" fill="#EDEDED" stroke="#000000" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" d="
		M202.24,270.598c0-0.45-0.363-1.158-0.813-1.158H95.72c-0.449,0-0.479,0.708-0.479,1.158v18.075c0,0.449,0.031,0.767,0.479,0.767
		h105.707c0.45,0,0.813-0.317,0.813-0.767V270.598z" />

        <ellipse id="sc_button" fill-rule="evenodd" clip-rule="evenodd" fill="#939393" stroke="#FFFFFF"
            stroke-miterlimit="10" cx="192.208" cy="279.135" rx="3.372" ry="3.485" />

        <rect id="sc_face" x="104.74" y="269.94" fill-rule="evenodd" clip-rule="evenodd" fill="#3F0505" width="77"
            height="17" />

        <polygon id="screen_frez" fill-rule="evenodd" clip-rule="evenodd" fill="#fff" points="104.74,270.051 104.661,286.94 
		181.76,286.94 181.74,269.94 181.189,269.94 181.248,286.462 105.397,286.46 105.338,270.053 	" />
        
<!--   SCALE SCREEN      -->
        <text transform="matrix(1 0 0 1 116 283.7)" fill="#FFFFFF" font-family="'Digital-7Italic'" opacity="0" class="count" font-size="16.0548">100</text>
        <text transform="matrix(1 0 0 1 145 283.7)" fill="#FFFFFF" font-family="'Digital-7Italic'" font-size="16.0548">lbs</text>
    </g>

<!-- DOOR COMPONENTS -->

    

    <g id="door_group">

        <polygon id="shadow" fill="#000" opacity="0"
            points="193.865,242.565 107.74,222.815 114.379,220.874 200.481,240.448" />

        <polygon id="iso_door" fill="#CFCFCF" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
    stroke-miterlimit="10" points="
109.894,6.867 114.678,6.108 200.864,25.579 200.915,238.942 196.579,240.057 110.246,220.168 	" />

        <polygon id="face_edge" fill="#666666" stroke="#000000" stroke-width="0.2551" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" points="
		196.682,26.75 200.771,25.573 200.948,238.465 196.682,239.512" />

        <polygon id="top_edge" fill="#666666" stroke="#000000" stroke-width="0.2551" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" points="
		196.598,26.592 110.032,6.902 114.379,5.874 200.481,25.448" />
    </g>

    <!-- ARROW -->
    <g id="arrow_group">
        <polygon id="arrow" fill="#FF0000" points="146.848,224.655 165.01,211.44 156.275,209.512 156.006,196.946 136.208,192.264 
		136.485,204.776 128.155,202.754" />
    </g>
    
    <!-- OUTER WRAPPER -->
    <g id="outer">
        <rect x="0.24" y="0.44" fill="none" stroke="#FF0000" stroke-width="0" stroke-miterlimit="10" width="300" height="299" />
    </g>


    
    <!-- HANDLE -->

    <g id="ultralatch">
    
        <path id="handle" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10"
            d="
    		M186.39,123.91c0,0,1.24-0.16,1.61-1.22c0.37-1.06,0.39-2.8-0.68-2.98c-0.92-0.15-9.47-1.52-10.8-1.67
    		c-1.11-0.13-1.8-0.16-2.31,0.25c-0.51,0.41-1.48,2.07,0.61,2.79c-0.12-0.07,0.99,1.02,2.09,3.23c1.1,2.21,1.51,2.94,2.23,4.19
    		s1.73,2.6,2.33,3.27c0.74,0.82,0.8,2.04,0.55,4.24c-0.12,1.12-0.46,1.97-0.22,3.11c0.24,1.13,0.8,1.57,1.38,1.94
    		c0.57,0.37,1.38,1.38,2.39,1.68c1.01,0.3,1.58,0.21,1.58,0.21s-0.11,1.92,0.41,2.23c0.52,0.31,1.33,0.15,1.33,0.15
    		s-1.09-2.27-1.07-2.52c0.03-0.24,0.95-0.26,1.59-0.99c0.64-0.73,1.27-1.45,1.49-3.4c0.22-1.94-0.19-3.22-0.62-3.76
    		s-1.04-2.83-1.1-3.81c-0.26-0.38-2.89-1.16-2.89-1.16s-0.55-1.84-0.45-3.25C185.94,125.04,186.39,123.91,186.39,123.91z" />
    
        <path display="none" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" d="
    		M186.3,129.71c0,0,0.67,1.47,0.71,1.92c0.26,1.23-0.01,4.25-0.01,4.25" />
    
        <path id="interior" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" d="
    		M188.49,130.8c0,0-0.66,0.03-0.95,0.26c-0.27,0.21-0.49,0.57-0.53,0.62" />
    
        <path display="none" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" d="
    		M187.86,132.95c0,0,0.94,0.82,1,1.17c0.06,0.36,0.04,1.15-0.45,1.54c-0.49,0.39-1.38,0.95-1.49,1.12c-0.1,0.17-0.1,1.25-0.38,2.05
    		c-0.27,0.75-0.96,1.74-1.95,2.02" />
    
        <path id="bottom" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10"
            d="
    		M188.23,138.14c-0.13,1.89-0.72,2.53-1.55,3.06c-0.83,0.53-3.3-0.23-3.3-0.23s1.29,1.66,3.39,1.55c2.1-0.11,3.28-2.12,3.57-3.44" />
    
        <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" d="
    		M187.78,140.99c0,0-0.32,1.01-0.07,1.33" />
    
        <path display="none" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" d="
    		M185.42,141.62c0,0,0.41,0.39,0.52,0.82" />
    
        <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" d="
    		M185.32,124.47c0,0-0.49,3.88-0.35,5.11c0.14,1.22,0.3,1.76,1.01,2.93c0.96,1.54,0.51,3.06,0.46,3.67
    		c-0.05,0.61-0.05,2.46-0.67,3.24c-0.61,0.77-1.42,1.43-2.72,1.08" />
    
        <line fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" x1="175.69" y1="121.36" x2="184.36" y2="123.24" />
    
        <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" d="
    		M185.87,123.77c-0.55-0.38-0.88-1.22-0.77-2.16c0.08-0.75,0.43-1.37,0.88-1.72" />
    
        <path display="none" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" d="
    		M187.48,142.87c0,0-0.13,0.03-0.47,0.06" />
    
        <polyline fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" points="
    		200.1,138.89 200.14,141.34 197.93,143.44 197.92,130.85 200.11,129.44 200.06,134.11 	" />
    
        <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" d="
    		M199.38,134.1c0,0-0.52,0.05-0.71,0.56c-0.2,0.57-0.14,3.79,0.01,4.04l0.2-0.04" />
    
        <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" d="
    		M199.34,134.27c0,0,1.4,0.13,1.79,0.2s0.37,0.57,0.39,0.73c0.02,0.15-0.03,3.33-0.03,3.33s-0.11,0.28-0.73,0.26
    		c-0.46-0.02-1.99-0.26-1.99-0.26" />
    
        <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10" d="
    		M199.13,135.22l1.03,0.06c0,0,1.07,0.08,1.18-0.22" />
        <ellipse fill="#9B9B9B" cx="198.98" cy="131.82" rx="0.38" ry="0.92" />
        <ellipse fill="#9B9B9B" cx="199.05" cy="140.65" rx="0.38" ry="0.92" />
    </g>
</svg>

script.js

// Speed of door dropping onto scale
TweenLite.to( "#door_group, #ultralatch", 2.0, { css:{ y:"25px", ease:Bounce.easeOut }, delay:0.5 } );

// Isometric arrow guides door onto scale, double pump
TweenMax.fromTo( "#arrow", 1, {y:"0px", opacity:"0.5"}, { y:"25px", opacity:"1", ease:Power1.easeOut, yoyo:true, repeat:2 } );

// disolves in scale counter
TweenLite.to( ".count", 1, { css:{ opacity: 1 }, delay:1.5 } );

// Shadow below door appears after door is on scale
TweenLite.fromTo("#shadow", 1, { opacity: "0" }, { opacity: "0.5", y: "0px", ease: Circ.easeIn, delay:0.3 }); 

// This is a simple whole number counter. After a specified delay, counter 
// slows as it arrives at value in element with class of .count. 

    $( '.count' ).delay( 1000 ).each( function () {  
        
        $( this ).prop( 'Counter',60 ).animate({ 
            Counter: $( this ).text()
        }, {
            duration: 2000,
            easing: 'swing',
            step: function ( now ) {
                $( this ).text( Math.ceil(now) );
            }
        });
    });

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-weight.markdown

Soss Door Weight

Using GSAP to animate weighing object. Will trigger counting class to 'weigh' it. The count counts up the the number entered into the SVG text field.

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;
}