Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="pupPage" class="fullWindow">
<div id="pupContainer"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="puppy" preserveaspectratio="xMidYMid meet" version="1.1" viewbox="0 0 1400 1200" x="0" xml:space="preserve" y="0"><g id="head"><path d="M706.5 961.039c-22.283 0-153.958-0.445-244.084-202.78-20.928-46.983-77.248-102.544-115.23-158.555-94.23-138.96 159.99-370.457 358.711-370.457s455.149 231.497 360.919 370.457c-38.468 56.728-109.35 112.377-130.726 159.667C842.621 966.153 728.783 961.039 706.5 961.039z" fill="#A36134"/><path d="M571.196 809.351c-6.518 0.023-12.322 4.116-14.526 10.25-4.614 12.84-12.437 34.411-16.464 44.405-2.827 7.013-1.279 14.991 3.871 20.528 35.395 38.058 75.739 60.933 110.934 77.174 30.693 14.164 79.188 12.62 108.88-3.538 27.579-15.008 56.133-33.07 82.117-61.701 7.178-7.91 10.247-18.757 8.351-29.268-2.76-15.295-8.526-35.466-12.243-47.77-1.981-6.558-8.037-11.028-14.888-11.003L571.196 809.351z" fill="#CECBC8" id="mouth"/><g id="tongue"><path d="M622.419 797.626C612.108 721.94 656.605 665 700 665s89.437 54.98 79.566 132.626c-10.913 85.84-19.932 116.306-72.204 126.24C663.255 932.249 633.332 877.727 622.419 797.626z" fill="#B66F81" stroke="#BF8AA0" stroke-miterlimit="10" stroke-width="12.3134"/><line fill="none" stroke="#996B7A" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5.6864" x1="705.295" x2="703" y1="925.736" y2="666"/></g><g id="eyes"><g id="eyeR"><path d="M828.824 472.628c-55.683 1.457-69.248 40.187-69.384 93.239-0.125 53.052 45.379 90.412 93.504 79.67 46.248-10.323 81.77-40.541 114.216-42.314C942.011 537.279 883.264 471.204 828.824 472.628z" fill="#915B36"/><path d="M759.44 565.867c-51.145-178.482 165.719-142.997 207.721 37.356C913.849 531.552 798.095 422.232 759.44 565.867z" fill="#824020" id="browR"/><defs><path d="M909.199 564.535c-6.265 38.243-71.507 99.489-123 7.266C808.113 465.752 895.154 530.453 909.199 564.535z" id="eyePathR"/></defs><clippath id="eyeClipPathR"><use overflow="visible" xlink:href="#eyePathR"/></clippath><g clip-path="url(#eyeClipPathR)" id="eyeBallR"><ellipse cx="847.887" cy="564.931" fill="#EBEDEC" rx="75" ry="69" transform="matrix(0.9848 0.1736 -0.1736 0.9848 110.9805 -138.6515)"/><circle class="eyeMove" cx="846.591" cy="572.279" fill="#3A3533" r="50"/><circle class="catchLight" cx="834.424" cy="554.902" fill="#EBEDEC" id="eyeHighlightR" r="12.5"/></g></g><g id="eyeL"><path d="M577.176 472.639c-54.44-1.424-107.99 57.509-133.139 123.453 25.165 0 66.771 39.133 113.019 49.456 48.126 10.742 90.364-26.619 90.239-79.67C647.158 512.826 632.859 474.095 577.176 472.639z" fill="#915B36"/><path d="M647.294 565.877c-35.486-146.146-151.893-38.917-203.258 30.214C501.497 405.127 684.118 393.443 647.294 565.877z" fill="#824020" id="browL"/><defs><path d="M495.996 559.698c0.347 36.965 66.521 110.993 123.146 14.615C605.682 470.425 510.042 525.615 495.996 559.698z" id="eyePathL"/></defs><clippath id="eyeClipPathL"><use overflow="visible" xlink:href="#eyePathL"/></clippath><g clip-path="url(#eyeClipPathL)" id="eyeBallL"><ellipse cx="557.93" cy="564.868" fill="#EBEDEC" rx="75" ry="69" transform="matrix(0.9848 -0.1736 0.1736 0.9848 -89.6121 105.4651)"/><circle cx="559.225" class="eyeMove" cy="572.216" fill="#3A3533" r="50"/><circle cx="546.773" class="catchLight" cy="559.181" fill="#EBEDEC" id="eyeHighlightL" r="12.5"/></g></g></g><defs><path id="headClipPath" d="M706.5 961.039c-22.283 0-153.958-0.445-244.084-202.78-20.928-46.983-77.248-102.544-115.23-158.555-94.23-138.96 159.99-370.457 358.711-370.457s455.149 231.497 360.919 370.457c-38.468 56.728-109.35 112.377-130.726 159.667C842.621 966.153 728.783 961.039 706.5 961.039z"/></defs><clippath id="snoutClip"><use overflow="visible" xlink:href="#headClipPath"/></clippath><g clip-path="url(#snoutClip)"><g id="snout"><path d="M701.957 835.582c40.743 0 134.456 33.541 134.456 33.541-41.232 43.848-97.719 12.061-130.517 12.061s-91.473 32.53-135.316-10.119C570.58 871.065 661.214 835.582 701.957 835.582z" fill="#333333" opacity="0.3"/><path d="M700.335 843.364c0 0-170.424 100.401-161.526-49.46 1.736-29.244 15.441-89.823 38.568-108.429 61.796-49.716 60.564-55.858 69.918-108.376 5.498-30.87 10.561-108.066 11.628-139.499 2.625-77.29-18.333-176.507-13.459-181.625 5.534-5.811 23.882-17.79 56.939-8.982 3.858 1.028 16.328 4.62 20.255 3.901 91.765-16.789 35.654 66.98 31.496 170.131-1.154 28.633 0.189 111.831 2.095 140.071 4.934 73.091 28.226 86.903 82.758 137.069 19.993 18.392 26.146 79.304 26.293 101.373C866.266 944.343 700.335 843.364 700.335 843.364z" fill="#EBEDEC"/></g></g><g id="nose"><path d="M695.381 805.018c4.192 1.964 9.047 1.964 13.239 0 27.135-12.712 46.44-27.847 50.438-35.71 0.993-1.953 0.265-5.856-0.905-9.709-1.771-5.829-0.06-12.151 4.489-16.205 4.604-4.102 9.359-10.378 9.359-18.799 0-16.093-3.278-46.595-70-46.595s-70 30.502-70 46.595c0 8.421 4.755 14.697 9.359 18.799 4.549 4.053 6.259 10.375 4.489 16.205-1.17 3.853-1.898 7.756-0.905 9.709C648.941 777.17 668.245 792.306 695.381 805.018z" fill="#3A3533"/><line fill="none" stroke="#161313" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" x1="701.5" x2="701.5" y1="708" y2="805"/><path d="M701.888 712.276c30.157 0 45.835 6.574 52.582 12.374 4.286 3.685 7.874-0.377 7.371-4.228-0.493-3.781-8.38-19.162-60.361-19.162s-59.053 16.163-59.546 19.944c-0.503 3.851 3.2 7.131 7.487 3.446C656.168 718.85 671.731 712.276 701.888 712.276z" fill="#827E7C" id="noseHighlight"/><g id="nostrilL" class="nostrils"><circle cx="737" cy="745" fill="#0C0B0B" r="20"/><path d="M756.083 750.96c-0.631 0.881-1.321 1.734-2.113 2.525-7.81 7.81-20.474 7.811-28.284 0-5.441-5.441-7.08-13.233-4.941-20.102-5.596 7.813-4.906 18.74 2.113 25.759 7.811 7.811 20.474 7.81 28.284 0C753.512 756.772 755.152 753.952 756.083 750.96z" fill="#827E7C"/></g><g id="nostrilR" class="nostrils"><circle cx="667" cy="745" fill="#0C0B0B" r="20"/><path d="M647.917 750.96c0.631 0.881 1.321 1.734 2.113 2.525 7.81 7.81 20.474 7.811 28.284 0 5.441-5.441 7.08-13.233 4.941-20.102 5.596 7.813 4.906 18.74-2.113 25.759-7.811 7.811-20.474 7.81-28.284 0C650.488 756.772 648.848 753.952 647.917 750.96z" fill="#827E7C"/></g></g><g id="lickLips"><path d="M731.479 707.404c50.811 9.907 64.061 58.094 66.307 80.986 1.863 18.979 8.105 60.392-25.786 94.846-52.943 21.783-86.41 27.259-135.077-10.872 46.847-61.136 15.638-74.197 13.745-111.361C648.697 722.302 694.99 700.289 731.479 707.404z" fill="#B66F81" id="lickLips_1" stroke="#BF8AA0" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="10"/><path d="M717.354 899.603c55.117-56.588 18.859-143.253-9.758-192.337" fill="none" id="lickLips_2" stroke="#BF8AA0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="7"/></g></g><g id="ears"><g id="earR"><path d="M967.583 583.431c-50.76 229.211-124.214 366.097-20.757 424.944 163.094 92.77 260.492-152.897 248.79-409.855S929.432 222.988 848.765 268.97C828.297 280.637 1025.47 322.037 967.583 583.431z" fill="#A36134"/><path d="M1107.347 374.94c46.099 85.758 74.453 117.045 76.014 252.579s-31.244 395.085-166.356 377.132c-125.805-16.717 10.766-266.406-5.553-488.477-4.906-66.764-52.115-218.324-137.238-243.828-28.534-8.549-27.44 1.805-27.44 1.805s167.474 121.795 109.277 334.577c-56.982 208.343-116.166 355.061-9.363 407.591 195.44 96.123 256.191-174.497 249.926-417.799C1194.233 506.024 1155.304 430.854 1107.347 374.94z" fill="#824020"/></g><g id="earL"><path d="M202.288 926.328c3.774 70.5 143.512 99.914 187.61 57.488 100.46-96.652 7.945-237.988 31.128-478.149 12.884-133.467 58.02-197.5 161.658-246.385-72.581-12.207-116.268 7.948-186.415 45.36-120.211 64.112-154.231 207.385-162.356 244.384C202.951 690.024 193.008 752.994 202.288 926.328z" fill="#A36134"/><path d="M582.684 259.281C476.4 298.27 422.995 365.385 406.018 498.378c-29.54 231.399 63.914 377.516-22.691 477.168-40.271 46.338-173.747 18.714-179.05-63.8-8.286-128.923 27.017-432.775 113.787-542.936-117.168 108.082-128.533 484.103-129.456 515.04-2.146 71.93 38.473 134.268 173.42 129.687 138.423-4.699 173.411-81.539 108.675-453.557C423.784 290.355 623.916 280.99 582.684 259.281z" fill="#824020"/></g></g></svg></div>
<div id="ballContainer">
<div id="ball"><svg preserveaspectratio="xMidYMid meet" version="1.1" viewbox="0 0 250 150" width="100%" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<path d="M49.93 53.3c1.41-14.61 4.35-26.61 8.92-32.79c-6.99 3.38-13.48 7.14-19.38 11.07 c-2.59 6.21-4.35 15.78-5.28 26.9C39.35 56.54 44.6 54.82 49.93 53.3z" fill="#F0F5FB"/>
<path d="M207.49 60.36c-0.22-9.49-0.88-19.16-2.19-28.77c-5.84-3.94-12.23-7.69-19.07-11.07 c1.06 10.48 1.71 22.11 2 34.02C194.7 56.26 201.13 58.21 207.49 60.36z" fill="#F0F5FB"/>
<path d="M49.93 53.3c1.41-14.61 4.35-26.61 8.92-32.79C77.5 11.49 99.66 5.12 123.44 5.12 c23.02 0 44.52 6.36 62.79 15.39c1.06 10.48 1.71 22.11 2 34.02C142.05 42.22 93.42 40.9 49.93 53.3z M39.47 31.58 C17.24 46.4 3.44 63.75 3.44 73.16c9.66-5.77 20.2-10.73 30.75-14.68C35.12 47.36 36.88 37.8 39.47 31.58z M205.3 31.59 c1.3 9.61 1.97 19.29 2.19 28.77c12.21 4.13 24.41 9.15 35.95 14.76C243.44 66.1 228.76 47.39 205.3 31.59z" fill="#8E5739"/>
<path d="M207.49 60.36c-6.36-2.15-12.79-4.1-19.26-5.82c0.65 27.18-0.62 55.85-3.37 75.87 c6.89-3.32 13.33-7.03 19.23-10.93C206.14 102.66 207.99 81.99 207.49 60.36z" fill="#C5CAD0"/>
<path d="M49.93 53.3c-5.33 1.52-10.59 3.24-15.75 5.18c-1.43 17.02-0.91 37.68 1.6 55.56 c5.48 4.14 11.53 8.15 18.07 11.84C49.2 103.08 47.82 75.25 49.93 53.3z" fill="#C5CAD0"/>
<path d="M35.78 114.04C15.72 98.88 3.44 82.05 3.44 73.16c9.66-5.77 20.2-10.73 30.75-14.68 C32.76 75.5 33.28 96.16 35.78 114.04z M207.49 60.36c0.5 21.64-1.34 42.31-3.4 59.12c24.18-15.97 39.36-35.17 39.36-44.35 C231.9 69.5 219.69 64.49 207.49 60.36z M188.22 54.53C142.05 42.22 93.42 40.9 49.93 53.3c-2.11 21.95-0.74 49.78 3.92 72.57 c19.63 11.07 43.64 19.25 69.59 19.25c22.44 0 43.44-6.05 61.41-14.72C187.6 110.39 188.87 81.72 188.22 54.53z" fill="#754939"/>
<path d="M4.8 72.85c68.2-40.69 161.6-34.94 237.39 1.94" fill="none" stroke="#42210B" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.479"/>
<path d="M167.55 51.36 c1.16 0.39 13.3 7.65 13.3 8.93c0 1.28-6.46 7.45-10.85 8.22c-4.4 0.77-21.61-2.79-27.28-2.6c-5.67 0.19-20.24 3.56-26.4 3.47 c-6.16-0.1-18.48-4.91-26.5-4.53s-16.11 4.14-20.91 4.14c-4.8 0-14.58-5.52-14.78-8.21c-0.2-2.68 11.64-9.14 14.08-9.91 C74.37 45.96 154.25 43.07 167.55 51.36z" fill="#754939" stroke="#42210B" stroke-miterlimit="10" stroke-width="1.972"/>
<path d="M68.9 47.47 c0 0-13.44-1.93-13.97-2.56c-0.53-0.63 11.58-11.62 17.74-12.46c6.16-0.84 17 0.63 21.99 0c4.99-0.63 13.71-5.13 24.86-4.71 c11.16 0.42 18.49 4.5 26.14 4.92c7.65 0.42 12.43-1.88 19.34 0s15.51 10.47 15.41 12.25c-0.11 1.78-26.25 2.93-26.25 2.93 L68.9 47.47z" fill="#8E5739" stroke="#42210B" stroke-miterlimit="10" stroke-width="1.479"/>
<path d="M67.25 43.83l1.12 8.74 c36.81-4.59 62.41-3.84 99.57-0.72l0.76-8.78C130.92 39.9 104.86 39.14 67.25 43.83z M67.81 48.2 c37.25-4.65 63.07-3.89 100.51-0.74C130.88 44.31 105.07 43.55 67.81 48.2z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M67.58 59.77 c-2.52-7.65-2.34-13.93 0.61-21.02c0.33-0.8 1.26-1.18 2.05-0.82l0.84 0.38c0.74 0.33 1.09 1.18 0.78 1.92 c-2.59 6.22-2.75 11.56-0.52 18.31c0.25 0.76-0.17 1.59-0.94 1.86l-0.87 0.31C68.74 60.98 67.84 60.57 67.58 59.77z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M80.3 57.81 c-0.19-3.42-0.54-11.99 0.26-19.27c0.09-0.85 0.87-1.46 1.72-1.34l0.91 0.12c0.81 0.11 1.4 0.83 1.31 1.64 c-0.77 6.99-0.43 15.31-0.25 18.63c0.05 0.82-0.58 1.52-1.41 1.58l-0.92 0.06C81.08 59.28 80.34 58.65 80.3 57.81z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M96.13 58.08 c-0.87 0.15-1.68-0.45-1.78-1.31c-0.42-3.64-0.39-7.28-0.36-12.99c0.01-1.59 0.02-3.27 0.03-5.44c0-0.83 0.68-1.51 1.53-1.51h0.92 c0.84 0 1.53 0.68 1.53 1.51c0 2.17-0.02 3.86-0.03 5.46c-0.04 5.76-0.06 9.08 0.34 12.47c0.09 0.79-0.46 1.51-1.25 1.65 L96.13 58.08z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M111.16 57.06l-0.92 0.07 c-0.86 0.07-1.61-0.58-1.64-1.44c-0.18-4.16-0.06-10.83 0.09-17.53l0.02-0.72c0.02-0.83 0.73-1.49 1.57-1.46l0.92 0.03 c0.84 0.03 1.5 0.72 1.48 1.54l-0.02 0.68c-0.15 6.67-0.28 13.16-0.1 17.27C112.6 56.31 111.97 56.99 111.16 57.06z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M124.44 57.38h-0.92 c-0.85 0-1.54-0.68-1.53-1.52c0.06-3.71 0.33-8.4 0.66-14.11c0.09-1.51 0.18-3.06 0.27-4.69c0.05-0.83 0.77-1.47 1.62-1.42 l0.92 0.06c0.84 0.05 1.47 0.76 1.43 1.59c-0.09 1.63-0.18 3.15-0.27 4.67c-0.33 5.68-0.59 10.27-0.65 13.96 C125.95 56.73 125.27 57.38 124.44 57.38z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M139.54 58.14l-0.9-0.18 c-0.8-0.16-1.33-0.9-1.21-1.7c0.47-3.08 1.29-10.71-0.5-17.95c-0.19-0.77 0.28-1.55 1.06-1.78l0.89-0.25 c0.84-0.24 1.71 0.27 1.92 1.11c1.95 7.91 1.06 16.16 0.55 19.5C141.21 57.74 140.39 58.31 139.54 58.14z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M153.36 58.84l-0.89-0.25 c-0.78-0.22-1.25-1-1.06-1.78c1.43-5.79 1-11.06-0.27-17.3c-0.16-0.81 0.35-1.6 1.17-1.78l0.9-0.19c0.83-0.17 1.65 0.35 1.81 1.17 c1.34 6.63 1.83 12.56 0.24 19.01C155.07 58.56 154.21 59.08 153.36 58.84z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
<path d="M165.95 60.18l-0.86-0.35 c-0.76-0.31-1.12-1.16-0.84-1.92c2.34-6.28 2.36-11.57 0.05-17.21c-0.3-0.73 0.06-1.57 0.79-1.9l0.84-0.38 c0.8-0.36 1.74 0.02 2.06 0.83c2.66 6.55 2.65 12.84-0.03 20.04C167.67 60.09 166.76 60.51 165.95 60.18z" fill="#D1D1D1" stroke="#603813" stroke-miterlimit="10" stroke-width="0.5"/>
</svg></div>
</div>
</div>
              
            
!

CSS

              
                
html,
body {
  background:#7DAFAA;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#puppy {
  width:100%;
  visibility: hidden;
}
#pupContainer {
    width: 50%;
    margin: 15vh 25%;
    position: absolute;
}
#ballContainer {
    overflow:visible; 
    padding:0; 
    position:absolute;
    top:0px;
}
#ball {
	width: 15%;
	height: auto;
	position: absolute;
}
#lickLips {
    visibility: hidden;
}
              
            
!

JS

              
                var select = function(id) {
		return document.getElementById(id);
	},
	selectBoth = function(s) {
		return document.querySelectorAll(s);
	},
	puppy = select('puppy'),
	container = select('pupContainer'),
	pupPage = select('pupPage'),
	head = select('head'),
	ball = select('ball'),
	browL = select('browL'),
	browR = select('browR'),
	look = selectBoth('.eyeMove'),
	catchLight = selectBoth('.catchLight'),
	snout = select('snout'),
	tongue = select('tongue'),
	lickLips = select('lickLips'),
	nose = select('nose'),
	ears = select('ears'),
	earR = select('earR'),
	earL = select('earL'),
	stageWidth = function() {
		var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		return width;
	},
	stageHeight = function() {
		var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		return height;
	},
	ballPos = {
		x: 0,
		y: 0
	}

TweenMax.set(puppy, {
	visibility: 'visible'
});
    
function sniff() {
	TweenMax.set('.nostrils', {
		transformOrigin: "50% 60%"
	});
	TweenMax.set('#noseHighlight', {
		transformOrigin: "50% 70%"
	});
	TweenMax.set('#nose', {
		transformOrigin: "50% top"
	});
	var noseSniff = new TimelineMax({
		delay: Math.random() * 3,
		onComplete: sniff
	});
  
	noseSniff.to('.nostrils', 0.1, {
		scale: 1.15,
		yoyo: true,
		ease: Power2.easeOut,
		repeat: 3
	}, "sniff").to('#noseHighlight', 0.1, {
		y: "-=0.5%",
		scaleY: 0.9,
		ease: Power2.easeOut,
		yoyo: true,
		repeat: 3
	}, "sniff").to('#nose', 0.1, {
		scaleY: .95,
		yoyo: true,
		ease: Power2.easeOut,
		repeat: 1
	}, "sniff");
};

var pant = function() {
	TweenMax.set("#tongue", {
		scaleY: 1
	});
	var lickArray = [1, 3, 5, 7, 9];
	var randomLick = lickArray[Math.floor(Math.random() * lickArray.length)];
	var lick = new TimelineMax({
		repeatDelay: Math.random() * 3,
		repeat: Math.floor(Math.random() * 4),
		onComplete: bigLick
	});
	lick.to("#tongue", 0.2, {
		scaleY: 1.1,
		repeat: randomLick,
		yoyo: true,
		ease: Power1.easeIn
	});
};

function bigLick() {
	TweenMax.set("#lickLips", {
		transformOrigin: "50% 85%",
		scaleY: 0,
		scaleX: 0.4,
		skewX: 30,
		skewY: 10,
		x: "-20%",
		visibility: "visible",
		opacity: 1
	});
	var tl = new TimelineMax({
		delay: 1,
		onComplete: pant
	});
	tl.to("#tongue", 0.8, {
		scaleY: 0,
		ease: Power4.easeIn
	}).set("#tongue", {
		opacity: 0
	}).to("#lickLips", 0.25, {
		skewX: 20,
		skewY: 0,
		scaleX: 0.8,
		scaleY: 0.8,
		x: "0%",
		ease: Power1.easeIn
	}, "-=0.4").to("#lickLips", 0.25, {
		skewX: -10,
		ease: Power3.easeOut
	}, "two").to("#lickLips_1", 0.25, {
		attr: {
			d: "M838.352 766.353c41.506 18.404 35.931 62.211 19.318 85.421c-26.141 36.521-70.111 44.413-90.437 50.281 c-17.507 2.185-81.644 8.439-130.311-29.692c55.745-6.42 81.94-29.73 101.863-62.186 C758.69 777.753 797.603 748.285 838.352 766.353z"
		},
		ease: Power3.easeIn
	}, "two").to("#lickLips_2", 0.25, {
		attr: {
			d: "M694.99 896.97c76.088-2.988 134.521-64.388 143.363-119.085"
		},
		ease: Power3.easeIn
	}, "two").to("#lickLips", .2, {
		skewX: 0,
		y: "20%",
		scaleY: 0.5,
		ease: Power1.easeOut
	}, "three").to("#lickLips_1", 0.15, {
		attr: {
			d: "M685.112 945.613c23.631 6.509 56.821 0.667 72.012-18.26c11.291-14.069 19.327-32.052 17.202-55.152 c-34.252-15.4-98.242-19.914-139.638-0.715c-1.328 16.462 7.277 35.926 11.281 43.463 C652.428 927.104 666.428 940.467 685.112 945.613z",
			stroke: "#B66F81"
		},
		ease: Power1.easeOut
	}, "three").to("#lickLips_2", 0.15, {
		attr: {
			d: "M704.004 859.226c-4.433 36.486-3.227 68.468 6.332 84.133",
			stroke: "#996B7A"
		},
		ease: Power1.easeOut
	}, "three").to("#lickLips", .1, {
		scaleY: 0,
		opacity: 0,
		y: "0%",
		ease: Power3.easeIn
	}, "-=0.15").to("#tongue", .2, {
		opacity: 1
	}, "three-=0.25").to("#tongue", .5, {
		scaleY: 1
	}, "three-=0.25").set("#tongue", {
		scaleY: 1,
		opacity: 1
	}).set("#lickLips_1", {
		attr: {
			d: "M731.479 707.404c50.811 9.907 64.061 58.094 66.307 80.986 1.863 18.979 8.105 60.392-25.786 94.846 -52.943 21.783-86.41 27.259-135.077-10.872 46.847-61.136 15.638-74.197 13.745-111.361C648.697 722.302 694.99 700.289 731.479 707.404z",
			stroke: "#BF8AA0"
		}
	}).set("#lickLips_2", {
		attr: {
			d: "M717.354 899.603c55.117-56.588 18.859-143.253-9.758-192.337",
			stroke: "#BF8AA0"
		}
	});
};

function blink() {
	var eyes = new TimelineMax({
		delay: Math.random() * 8,
		onComplete: blink
	})
	eyes.to("#eyePathR", 0.1, {
		attr: {
			d: "M909.199 564.535c-49.092 16.296-68.581 17.862-123 7.266 C834.735 575.659 863.301 574.308 909.199 564.535z"
		},
		yoyo: true,
		repeat: 1
	}).to("#eyePathL", 0.1, {
		attr: {
			d: "M495.996 559.698c48.243 15.891 69.571 17.919 123.146 14.615 C564.831 571.366 550.49 569.16 495.996 559.698z"
		},
		yoyo: true,
		repeat: 1
	}, "-=0.2");
};

var setball = function() {
	var biscGridWidth = window.innerWidth,
		biscGridHeight = window.innerHeight
	TweenLite.set("#ballContainer", {
		height: biscGridHeight,
		width: biscGridWidth
	});
	TweenLite.set(ball, {
		x: biscGridWidth / 6 - biscGridWidth / 13.33,
		y: biscGridHeight / 10
	});
	TweenLite.set('.fullWindow', {
		minHeight: biscGridHeight,
		width: biscGridWidth
	});
};

function pupPlay() {
	document.body.style.background = "#7DAFAA";
	blink();
	setball();
	sniff();
	pant();
};

window.onload = pupPlay();
window.addEventListener("resize", setball);

TweenMax.set([head, look, catchLight, nose, ears, ball], {
	transformOrigin: '50% 50%'
})
TweenMax.set(earL, {
	transformOrigin: '90% 15%'
})
TweenMax.set(earR, {
	transformOrigin: '35% 15%'
})
TweenMax.set(browL, {
	transformOrigin: '15% 50%'
})
TweenMax.set(browR, {
	transformOrigin: '100% 100%'
})

var headMaxY = 20;
var headMaxRot = 15;
var snoutMaxY = 15;
var noseMaxY = 25;
var browMaxRot = 0;
var eyesMaxY = 15;
var eyeMaxX = 10;
var eyeMaxY = 10;
var earMinY = -10;
var earMinRY = -10;
var earMaxRX = 0;
var hello = new TimelineMax({
	repeat: -1
});

hello.set(ball, {
	transformOrigin: "50% 50%",
	rotation: -2
}).to(ball, 0.5, {
	scale: 1.2,
	rotation: 2,
	delay: 0.5,
	ease: Power3.EaseIn
}).to(ball, 0.5, {
	scale: 1,
	rotation: -2,
	ease: Power3.EaseOut
});

function killHello() {
	hello.kill();
}

Draggable.create(ball, {
	bounds: "#ballContainer",
	edgeResistance: 0.5,
	type: "x,y",
	throwProps: true,
	autoScroll: true,
	onDragStart: killHello,
	onDrag: ballPosition,
	onDragEnd: ballPosition,
	onThrowUpdate: ballPosition,
	onThrowComplete: ballPosition
});

function ballPosition() {
	ballPos.x = -1 * ((stageWidth() / 2) - this.x - (stageWidth() / 13.33)) / (stageWidth() / 2) * 800;
	ballPos.y = -1 * ((stageHeight() / 2) - this.y - (stageWidth() / 13.33)) / (stageHeight() / 2) * 500;
	// console.log([(ballPos.x),(ballPos.y)]);
	// console.log(1+((ballPos.x/800)/10 * -1));
	TweenMax.to([head, ears], 0.5, {
		x: ballPos.x / 20,
		y: ((ballPos.y / 15) > headMaxY) ? headMaxY : ballPos.y / 15
	})
	TweenMax.to(look, 0.5, {
		x: ballPos.x / 50,
		y: ((ballPos.y / 40) > eyesMaxY) ? eyesMaxY : ballPos.y / 40
	})
	TweenMax.to(catchLight, 0.5, {
		x: -((ballPos.x / 30) > eyeMaxX) ? -eyeMaxX : -ballPos.x / 30,
		y: -((ballPos.y / 22) > eyeMaxY) ? -eyeMaxY : -ballPos.y / 22
	})
	TweenMax.to(head, 0.5, {
		rotation: -((ballPos.x / 50) > headMaxRot) ? -headMaxRot : -ballPos.x / 50
	})
	TweenMax.to(ball, 0.2, {
		rotation: ((ballPos.x / 50) > headMaxRot) ? headMaxRot : ballPos.x / 50
	})
	TweenMax.to(earR, 0.5, {
		y: -((ballPos.x / 55) < earMinRY) ? -earMinRY : -ballPos.x / 55,
		x: -((ballPos.x / 50) > earMaxRX) ? -earMaxRX : -ballPos.x / 50,
		rotation: -(ballPos.x / 180),
		scaleX: 1 + ((ballPos.x / 800) / 10 * -1)
	})
	TweenMax.to(earL, 0.5, {
		y: -((ballPos.x / 25) < earMinY) ? earMinY : ballPos.x / 25,
		rotation: -(ballPos.x / 100),
		scaleX: 1 + (ballPos.x / 800) / 12
	})
	TweenMax.to(browL, 0.5, {
		rotation: ((ballPos.y / 45) > browMaxRot) ? browMaxRot : ballPos.y / 45
	})
	TweenMax.to(browR, 0.5, {
		rotation: -((ballPos.y / 35) > browMaxRot) ? -browMaxRot : -ballPos.y / 35
	})
	TweenMax.to([snout, tongue, lickLips], 0.5, {
		x: ballPos.x / 35,
		y: ((ballPos.y / 20) > snoutMaxY) ? snoutMaxY : ballPos.y / 20
	})
	TweenMax.to(nose, 0.5, {
		x: ballPos.x / 12,
		y: ((ballPos.y / 15) > noseMaxY) ? noseMaxY : ballPos.y / 15
	})
};

              
            
!
999px

Console