Soss Door Depth

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">
    
    <defs>
<!--  For area between arrows   -->
        <clipPath id="myClipPath">
            <rect x="180" y="100" width="20" height="30" fill="fff">
            <animate attributeType="XML" attributeName="x" from="180" to="200" dur="2s" repeatCount="10" />
            </rect>
        </clipPath>
<!--  For anything in the zoom circle  -->
        <mask id="svg-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
            <circle id="svg-mask-img" cx="225.46" cy="229.36" r="50" fill="#FFF" />
        </mask>
<!-- For the Zoom Out area of the door edge -->
        <mask id="sect-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
            <rect id="sect-mask-rect" x="190" y="210" width="20" height="30" fill="fff">
        </mask>

    </defs>
<!-- Is the container shape for SVG   -->
    <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>
<!-- On the page title  -->
    <text transform="matrix(1 0 0 1 10 290)" fill="#FFFFFF" font-family="'Digital-7Italic'" font-size="18"
        class="count">Door Thickness</text>
    
<!-- Shapes -->
        <!--  INITIAL DOOR  -->
        <polygon id="isodoor" fill="#CFCFCF" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"
            stroke-miterlimit="10"
            points="114.894,17.867 119.678,17.108 205.864,36.579 205.915,259.942 201.579,261.057 115.246,241.168" />

        <polygon id="door_top" fill="#666666" stroke="#000000" stroke-width="0.2551" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" points="
            201.598,37.592 115.032,17.902 119.379,16.874 205.481,36.448" />


        <!--   EDGE   -->

        <polygon id="arrow" fill="#FF0000" points="206.49,88.33 220.12,101.83 220.22,94.05 231.83,91.19 232.01,72.81 
            220.3,75.78 220.27,67.94"/>

        <polygon id="arrow2" fill="#FF0000" points="201.24,88.68 185.92,75.35 185.99,83.44 174.97,86.21 174.85,104.61 
            185.82,101.83 185.72,109.58"/>



        <polygon id="face_edge" fill="#666666" stroke="#000000" stroke-width="0.2551" stroke-linecap="round"
            stroke-linejoin="round" stroke-miterlimit="10" points="
            201.682,37.75 205.771,36.573 205.948,259.466 201.682,260.513" />



        <g id="firstRuler">
            <polygon id="ruler_bkg" fill="#FFFFFF" points="163.86,115.93 164.25,136.79 235.33,121.97 235.53,100.72 	"/>

            <polygon id="ruler_mark" fill="#FF0000" points="206.37,108.64 201.69,109.58 201.46,127.6 206.49,126.46 	"/>

            <path id="ruler_edge" d="M235.53,100.72l-73.04,15.41l0.12,21.72l72.72-15.89L235.53,100.72z M164.16,135.54l-0.2-17.84l3.69-0.62
                l-0.03,1.85l1.65-0.36l0.03-1.86l3.08-0.68l-0.03,1.86l1.65-0.36l0.03-1.86l3.08-0.67l-0.08,4.71l1.65-0.36l0.08-4.71l3.08-0.68
                l-0.03,1.86l1.65-0.36l0.03-1.86l3.08-0.67l-0.03,1.86l1.65-0.36l0.03-1.86l3.08-0.68l-0.08,4.71l1.65-0.36l0.08-4.71l3.08-0.68
                l-0.03,1.86l1.65-0.36l0.03-1.86l3.08-0.67l-0.03,1.85l1.65-0.36l0.03-1.86l3.08-0.67l-0.08,4.71l1.65-0.36l0.08-4.71l3.08-0.67
                l-0.03,1.85l1.65-0.36l0.03-1.85l3.08-0.68l-0.03,1.86l1.65-0.36l0.03-1.86l3.08-0.68l-0.08,4.71l1.65-0.36l0.08-4.71l3.08-0.67
                l-0.03,1.86l1.65-0.36l0.03-1.85l3.08-0.68l-0.03,1.86l1.65-0.36l0.03-1.86l3.08-0.68l0.03,18.16L164.16,135.54z"/>
        </g>


        <!-- ULTRALATCH 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="
            M191.39,145.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
            c0.72,1.25,1.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.22c0.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.39c0.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.25C190.94,147.04,191.39,145.91,191.39,145.91z"/>

            <path id="interior" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M193.49,152.8c0,0-0.66,0.03-0.95,0.26c-0.27,0.21-0.49,0.57-0.53,0.62"/>

            <path id="bottom" fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M193.23,160.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="
            M192.78,162.99c0,0-0.32,1.01-0.07,1.33"/>

            <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M190.32,146.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="180.69" y1="143.36" x2="189.36" y2="145.24"/>

            <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M190.87,145.77c-0.55-0.38-0.88-1.22-0.77-2.16c0.08-0.75,0.43-1.37,0.88-1.72"/>

            <polyline fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
            205.1,161.89 205.14,164.34 202.97,165.55 202.96,152.95 205.11,152.44 205.06,157.11 	"/>

            <path fill="#EFEFEF" stroke="#000000" stroke-width="0.2835" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M204.41,156.58c0,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="
            M204.36,156.75c0,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="
            M204.15,157.7l1.03,0.07c0,0,1.07,0.08,1.18-0.22"/>
        <ellipse fill="#9B9B9B" cx="203.98" cy="154.53" rx="0.38" ry="0.92"/>
        <ellipse fill="#9B9B9B" cx="204.36" cy="261.51" rx="0.38" ry="0.92"/>
        </g> <!-- /end ultralatch -->



        <!--  ZOOM    -->
    <g mask="url(#svg-mask)" > 
        
         <circle id="grabView" cy="230" cx="204" r="3" fill="#666" opacity="1" stroke-width="0" ></circle>

         <polygon id="edgeSection" fill="none" stroke-width="0" stroke-miterlimit="10" points="205.5,218.14 201.5,221.34 
    201.5,230.01 205.5,227.52"/>
        

        <g id="zoom">

            <circle id="backScope" fill="#aaaaaa" opacity="0" cx="225.46" cy="229.36" r="50"/>

              

                <path id="door_edge" fill="#666666" opacity="0" stroke="#B3B3B3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                    M208.5,276.5v-94.1c6-1.72,10.46-2.66,16.1-2.66c5.93,0,11.9,1.04,16.9,2.94v93.83c0,0-5.5,3.5-15.17,3.5
                    C215.33,280,208.5,276.5,208.5,276.5z"/>

                <path id="white_ruler" fill="#FFFFFF" opacity="0" d="M258.02,267.69l-63.95,0.14C174.4,254.26,176,228,176,228h101.06C277.06,228,277.71,251.85,258.02,267.69z"
                />

                <polygon id="edgeMark" opacity="0" fill="#FF0000" points="242,265.61 208,265.56 208,230 242,230" />

                <g id="measure" opacity="0">

                    <path id="whole" fill="#FFFFFF" d="M212.76,243.14h6.1v13.45h-3.51v-10.57h-2.59V243.14z"/>
                    <path id="fraction" fill="#FFFFFF" d="M220.84,243.14h3.91v8.02h-2.4v-6.14h-1.51V243.14z M231.83,243.14h2.36l-9.55,13.45h-2.38L231.83,243.14
                        z M235.96,249.08c0.56,0.4,0.83,0.93,0.83,1.59c0,0.32-0.09,0.63-0.27,0.92c-0.18,0.29-0.42,0.53-0.71,0.71
                        c0.43,0.18,0.78,0.45,1.04,0.82c0.26,0.36,0.38,0.76,0.38,1.2c0,0.72-0.32,1.29-0.95,1.72c-0.63,0.43-1.49,0.64-2.56,0.64
                        s-1.93-0.21-2.56-0.63c-0.63-0.42-0.95-0.99-0.95-1.69c0-0.45,0.14-0.86,0.41-1.23c0.27-0.37,0.65-0.64,1.12-0.82
                        c-0.33-0.2-0.6-0.46-0.8-0.77c-0.2-0.31-0.3-0.62-0.3-0.94c0-0.64,0.28-1.15,0.83-1.54c0.56-0.38,1.29-0.58,2.22-0.58
                        C234.66,248.49,235.41,248.69,235.96,249.08z M232.81,253.46c-0.22,0.15-0.33,0.37-0.33,0.65s0.11,0.5,0.32,0.65
                        c0.21,0.15,0.52,0.23,0.93,0.23s0.72-0.08,0.93-0.23c0.21-0.15,0.32-0.37,0.32-0.65s-0.11-0.5-0.33-0.65
                        c-0.22-0.15-0.52-0.23-0.92-0.23S233.02,253.31,232.81,253.46z M232.94,250.21c-0.18,0.13-0.27,0.33-0.27,0.59
                        c0,0.51,0.35,0.77,1.06,0.77s1.06-0.26,1.06-0.77c0-0.26-0.09-0.45-0.27-0.59c-0.18-0.13-0.44-0.2-0.79-0.2
                        S233.12,250.07,232.94,250.21z"/>
                </g><!--  /end measure   -->


                <g id="ruler_group" opacity="0">

                    <polygon id="ruler_lower" points="192.26,267 258.25,267 260.21,264 189.98,264 	"/>

                    <polygon id="ruler_upper" fill="#020202" points="176.84,229.28 248.33,229 248.44,229 274.28,229.1 274,233 270.57,233 270.62,235 268.96,235 
                    268.91,233 265.82,233 265.87,235 264.21,235 264.16,233 261.07,233 261.2,238 259.54,238 259.41,233 256.32,233 256.37,235 
                    254.71,235 254.67,233 251.57,233 251.62,235 249.97,235 249.92,233 247.88,233 247.82,235 246.17,235 246.22,233 243.13,233 
                    243.08,235 241.42,235 241.47,233 238.38,233 238.25,238 236.59,238 236.72,233 233.63,233 233.58,235 231.92,235 231.97,233 
                    228.88,233 228.83,235 227.17,235 227.23,233 224.13,233 224.16,238 222.5,238 222.48,233 219.38,233 219.33,235 217.68,235 
                    217.73,233 214.63,233 214.58,235 212.93,235 212.98,233 209.89,233 209.91,238 208.26,238 208.23,233 205.14,233 205.09,235 
                    203.43,235 203.48,233 200.39,233 200.34,235 198.68,235 198.74,233 195.64,233 195.67,238 194.01,238 193.99,233 190.89,233 
                    190.84,235 189.18,235 189.24,233 186.15,233 186.09,235 184.44,235 184.49,233 184.53,233 181.44,233 181.39,235 179.73,235 
                    179.78,233 177,233"/>

                </g> <!-- /ruler_group -->


                <circle id="lens" opacity="0" fill="none" stroke="#FF0000" stroke-width="2.8347" stroke-miterlimit="10" cx="225.46" cy="229.74" r="50"/>

        </g> <!-- /end ZOOM --> 

    </g> <!--   /end MASK   -->

 </svg>

script.js

var tl = new TimelineLite(),
arrow = $( `#arrow` ),
other = $( `#arrow2` ), 
sect = $( `#edgeSection` ),
grab = $( `#grabView` ),
scope = $( `#backScope` ), 
drEdge = $( `#door_edge` ),
edgeMark = $( `#edgeMark` ), 
whtRu = $( `#white_ruler` ),
rulerGp = $( `#ruler_group` ),
measure = $( `#measure` ), 
lens = $( `#lens` ); 

//TweenLite.to( sect, 1, { fill:"#666 "} );

// initialize the zoom-out section fill
tl.to( sect, 0, { opacity:1, fill:"#666666" } ) 

// Arrows timed to play together, repeat twice
    .fromTo( arrow, 1, { x:"25px", y:"-10px", opacity:"0.3" }, { x:"0", y:"0", opacity:"1", ease:Power1.easeOut, repeat:2, yoyo:true } ) 
    .fromTo( other, 1, { x:"-25px", y:"10px", opacity:"0.3" }, { x:"0", y:"0", opacity:"1", ease:Power1.easeOut, repeat:2, yoyo:true }, "-=3" )

    // Fade in the section area
    .fromTo( sect, 0.5, { opacity:1, fill:"#666666" }, { opacity:1, fill:"#000000" } )

// Grab is a skewed circle that sets location for the zoom window
    .fromTo( grab, 0.8, {  stroke:"#F00", opacity:"0.2", skewX:"-5", skewY:"-30", strokeWidth:"0.1" }, {  stroke:"#F00", opacity:"0.5", skewX:"0", skewY:"0", x:-25, y:-46, scale:16.8, strokeWidth:"0.1", ease:Power1.easeOut, delay:0.5  }, "-=0.3" )
    
    .to( lens, 0.5, { opacity:"0.8" }, "-=0.2" )
    .to( scope, 0.5, { opacity:"0.8" }, "-=0.3" )
    .to( grab, sect, 0, { opacity:0 } )
    

// fills set for maximum contrast
    .to( drEdge, 0.5, { opacity:"1", fill:"#666", stroke:"#000", strokeWidth:2 }, "-=0.5" )

// custom SVG Mask for the ruler and background animating in
    .fromTo( whtRu, 0.3, { opacity:"0", y:50 }, { opacity:"1", y:0, ease: Power2.easeOut } )
    .fromTo( rulerGp, 0.3, { opacity:"0", y:50 }, { opacity:"1", y:0, ease: Power2.easeOut }, "-=0.3" )

// red background and number fades in
    .to( edgeMark, 0.5, { opacity:"1" } )
    .to( measure, 0.5, { opacity:"1" } );

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

Soss Door Depth

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.

soss-door-depth2.markdown

Soss Door Depth2

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

/** Center Align the SVG **/

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