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.
Created
April 26, 2019 20:03
-
-
Save shrinkray/53061c0cc3c7e304641b0cbdd99f766f to your computer and use it in GitHub Desktop.
Soss Door Height
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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="bottomMask"> | |
| <rect id="bbox" x="110" y="240" width="100" height="60" fill="000" /> | |
| </mask> | |
| </defs> | |
| <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 Height</text> | |
| <g id="measures"> | |
| <!-- DOOR --> | |
| <g id="door"> | |
| <polygon id="door" 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"> | |
| <rect id="ruler_back" x="89" y="21" fill="#FFF" width="19" height="218"/> | |
| <rect id="height" x="89" y="21" fill="#FF0000" width="19" height="218"/> | |
| <path id="theRuler" fill="#020202" d="M88.196,240.02l0.042-219.695l21.595-0.125l0.06,219.97L88.196,240.02z M90.032,238.631 | |
| l18.018-0.097l0.026-3.091l-5.574,0.128v-1.655l5.589-0.129l0.025-3.091l-1.862,0.049v-1.658l1.875-0.05l0.026-3.091l-1.901,0.051 | |
| v-1.654l1.897-0.053v-3.094v-0.053l-1.897,0.053v-1.656l1.897-0.053v-3.091l-1.897,0.053v-1.656l1.897-0.053v-3.094l-4.745,0.133 | |
| v-1.656l4.745-0.13v-3.094l-1.897,0.05v-1.656l1.897-0.049v-3.092l-1.897,0.05v-1.655l1.897-0.049v-3.093l-4.745,0.13v-1.656 | |
| l4.745-0.132v-3.092l-1.897,0.052v-1.656l1.897-0.051v-3.094l-1.897,0.052v-1.657l1.897-0.049v-3.094l-4.745,0.127v-1.653 | |
| l4.745-0.132v-3.092l-1.897,0.053v-1.656l1.897-0.055v-3.09l-1.897,0.051v-1.654l1.897-0.053v-3.092l-4.745,0.129v-1.655 | |
| l4.745-0.13v-3.091l-1.897,0.049v-1.658l1.897-0.049v-3.092l-1.897,0.052v-1.656l1.897-0.051v-3.094l0,0l-1.897,0.053v-1.656 | |
| l1.897-0.053v-3.09l-1.897,0.053v-1.656l1.897-0.053v-3.094l-4.745,0.133v-1.657l4.745-0.13v-3.094l-1.897,0.051v-1.656l1.897-0.05 | |
| v-3.091l-1.897,0.05v-1.657l1.897-0.048v-3.094l-4.745,0.13v-1.656l4.745-0.131v-3.091l-1.897,0.05v-1.656l1.897-0.052v-3.093 | |
| l-1.897,0.052v-1.656l1.897-0.051v-3.093l-4.745,0.128v-1.655l4.745-0.13v-3.094l-1.897,0.053v-1.656l1.897-0.054v-3.091 | |
| l-1.897,0.051v-1.654l1.897-0.054v-3.09l-4.745,0.128v-1.656l4.745-0.13v-3.091l-1.897,0.05V96.08l1.897-0.049v-3.091l-1.897,0.05 | |
| v-1.655l1.897-0.053v-3.094v0.042l-1.897,0.054v-1.658l1.897-0.052v-3.091l-1.897,0.053v-1.656l1.897-0.054v-3.093l-4.745,0.133 | |
| v-1.656l4.745-0.131v-3.093l-1.897,0.051v-1.656l1.897-0.05v-3.091l-1.897,0.05v-1.657l1.897-0.049v-3.093l-4.745,0.13v-1.656 | |
| l4.745-0.131v-3.091l-1.897,0.051V58.14l1.897-0.052v-3.093l-1.897,0.052v-1.656l1.897-0.051v-3.094l-4.745,0.128V48.72l4.745-0.13 | |
| v-3.093l-1.897,0.053v-1.657l1.897-0.053v-3.09l-1.897,0.05v-1.654l1.897-0.053v-3.091l-4.745,0.128v-1.656l4.745-0.13v-3.091 | |
| l-1.897,0.05v-1.659l1.897-0.049v-3.092l-1.897,0.051v-1.655l1.897-0.052v-3.094l-18.127,0.18l-0.02,216.698H90.032z"/> | |
| <polygon id="arrow" fill="#FF0000" points="83.56,221.405 70,206.602 70,212 59,212 59,231 70,231 70,236.599 "/> | |
| </g> | |
| <!-- ULTRALATCH --> | |
| <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.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 id="interior" 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 id="bottom" 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> | |
| </svg> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // VERTICAL | |
| var tl = new TimelineMax(); | |
| // vertical | |
| var $v_mark = $('#height'), | |
| $arrow = $('#arrow'); | |
| TweenMax.from( $v_mark, 3, { scaleY:0, ease:Sine.easeOut } ); | |
| TweenMax.fromTo( | |
| $arrow, 2.1, | |
| { y:"-190px", opacity:"0.3" }, | |
| { y:"12px", opacity:"1", ease:Sine.easeInOut, repeat:2, yoyo:true } | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| svg { | |
| background: #401616; | |
| } | |
| body { | |
| background-color: #401616; | |
| overflow: hidden; | |
| text-align:center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment