January 1

  <div id='container'>
    <svg id='svg' xmlns="http://www.w3.org/2000/svg" width="500" height="420" viewBox="0 0 500 420">
      <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="250" y1="79.672" x2="250" y2="529.672">
        <stop offset="0" stop-color="#cccccc"/>
        <stop offset="1" stop-color="#FFF"/>
      </linearGradient>
      <path fill="#dddddd" d="M0 0h500v420h-500z"/>
      <g id='sun'>
      <circle fill="#FFF" cx="413.978" cy="85" r="68.719"/>
      <circle opacity=".2" fill="#FFF" cx="413.978" cy="85" r="98.876"/>
      <circle opacity=".2" fill="#FFF" cx="413.978" cy="85" r="132.637"/>
      <circle opacity=".2" fill="#FFF" cx="413.978" cy="85" r="167.453"/>
      </g>
      <g id='pls' opacity='0'>
      <path fill="#FFF" filter='url(#InSh)' d="M172.498 175.358s3.244 11.612 13.648 15.365c0 0-32.58 6.635-49.153-32.28-17.1-40.15 20.543-74.184 74.1-73.033 71.08 1.527 71.3 102.148-38.595 89.948z"/>
      <text id="T" y="105" text-anchor="middle" fill="#444" font-family='Indie Flower' font-weight="bold" font-size="18px">
        <tspan x="201" dy="1.2em">pls, just Don't</tspan>
        <tspan x="201" dy="1.3em">Throw Me...</tspan>
      </text>
      </g>
      <text id="T" x="15" y="60" opacity='0.2' fill="#000" font-family="Oswald" font-size="3em">
        Leave Me Alone...
      </text>
      <path id="W" fill="none" stroke="#444" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M0 270h500"/>
      <g id="B" opacity='0'>
        <path fill="#006657"  d="M314.29 222.438c0 22.007-38.674 51.917-60.043 51.917h-5.657c-21.368 0-60.043-29.91-60.043-51.918H314.29z"/>
        <path fill="#2BB673" d="M314.303 224.368c0-9.937-.936-15.343-6.147-25.694-5.524-10.975-2.268-17.667-3.693-30.833-14.42 18.29-33.15 22.537-53.045 22.558-19.896-.02-38.625-4.265-53.045-22.553-1.425 13.168 1.83 19.86-3.693 30.834-5.21 10.35-6.147 15.756-6.147 25.693 0 20.33 37.33 44.5 58.33 44.848h9.11c21-.345 58.33-24.515 58.33-44.846v-.005z"/>
        <path fill="#006657" filter='url(#InSh)' d="M198.39 167.825c0 6.345 20.723 17.358 36.037 23.594 12.78 5.202 17 20.876 17 20.876s4.216-15.658 16.998-20.862c15.314-6.236 36.038-17.248 36.038-23.594-17.507 22.207-88.5 22.275-106.074-.015z"/>
        <g fill="#EDFF00" opacity=".5" >
        <ellipse  cx="252" cy="255.625" rx="28.111" ry="11.35"/>
        <circle  cx="283.792" cy="248.53" r="3.831"/>
        <circle  cx="283.112" cy="255.342" r="1.821"/>
        <circle  cx="240.377" cy="242.356" r="1.757"/>
        </g>
        <path opacity=".3" d="M259.406 238.794c0 5.24-7.417 17.44-8.113 17.44-.696 0-8.11-12.2-8.11-17.44s6.04-9.49 8.12-9.49 8.12 4.25 8.12 9.49h-.017z"/>
        <path fill="#FCEE21" d="M259.406 237.16c0 4.48-7.375 12.346-8.113 12.346-.738 0-8.11-7.866-8.11-12.346 0-2.056 1.272-3.143 2.85-4.8 1.86-1.956 4.145-4.313 5.27-4.313 1.13 0 3.434 2.37 5.3 4.342 1.564 1.65 2.82 2.72 2.82 4.77h-.017z"/>
        <ellipse opacity=".3" fill="#000" cx="281.03" cy="217.395" rx="24.371" ry="24.961"/>
        <ellipse opacity=".3" fill="#000" cx="221.661" cy="217.395" rx="24.371" ry="24.961"/>
        <g filter='url(#InSh)'>
        <ellipse fill="#333" cx="277.555" cy="216.313" rx="19.177" ry="18.753"/>
        <ellipse fill="#333" cx="225.232" cy="216.313" rx="19.177" ry="18.753"/>
        </g>
        <g id="foot" fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
        <path  stroke="#C69C6D"  d="M232.6 267.234l-1 9.4m7.18-10.4l-1 12.505m7.18-11.51l-1 9.4m16.763-9.4l1 9.4m5.18-10.4l1 12.5m5.178-11.51l1 9.4"/>
        <path d="M231.973 273.126c-.124 1.17-.25 2.34-.373 3.508m6.51-2.026l-.33 4.13m6.59-5.954l-.41 3.845m17.354-3.847l.41 3.845m5.792-2.742l.387 4.84m5.735-6.276l.443 4.167" opacity=".17" stroke="#020100" />
        </g>
        <path id="wing-l" fill="#2BB673" d="M206.985 247.035s2.424 24.602.158 23.21c-15.798-9.72-18.6-47.558-18.6-47.558l18.443 24.35v-.002z"/>
        <path id="wing-r" fill="#2BB673" d="M295.846 246.785s-2.42 24.602-.155 23.21c15.8-9.72 18.6-47.558 18.6-47.558l-18.44 24.35v-.002z"/>
        <g class="eye">
          <path fill="#FFF" d="M295.69 216.61s-8.112 6.05-18.13 6.085-18.146-5.952-18.146-5.952 8.12-6.05 18.137-6.09c10.028-.047 18.15 5.953 18.15 5.953h-.006v.005z"/>
          <path fill="#cdcdcd" d="M295.69 216.597s-8.112 6.048-18.13 6.084c11.934-2.66 12.766-8.48-.01-12.04 10.024-.05 18.146 5.95 18.146 5.95h-.006v.01z"/>
        </g>
        <g class="eye">
          <path fill="#FFF" d="M243.182 216.716s-1.974 12.73-17.703 12.69-17.656-12.778-17.656-12.778 2.14-12.73 17.704-12.69c15.57.04 17.652 12.778 17.65 12.778z"/>
          <path fill="#cdcdcd" d="M225.48 229.406c-15.73-.04-17.654-12.778-17.654-12.778s2.14-12.73 17.704-12.69c-17.704 8.95-7.67 23.187-.05 25.468z"/>
        </g>
        <path id="eyes" fill="#231F20" d="M232.35 216.563c0 .37-1.327-.013-1.482.296-.155.3.863 1.3.592 1.51-.39.3-.877.48-1.407.48-1.27 0-2.3-1.03-2.3-2.3s1.03-2.3 2.29-2.3 2.29 1.023 2.29 2.293l.017.015v.005zm43.05.22c0 .37-1.327-.014-1.482.295-.155.31.863 1.31.592 1.52-.39.3-.877.48-1.407.48-1.27 0-2.3-1.028-2.3-2.296s1.03-2.296 2.29-2.296 2.29 1.027 2.29 2.296h.017z"/>
        <path fill="#F7D33E" d="M251.293 249.506c-.738 0-8.11-7.866-8.11-12.346 0-2.056 1.272-3.143 2.85-4.8 1.86-1.956 4.145-4.313 5.27-4.313 1.13 0 .728 21.46-.01 21.46z"/>
      </g>
    </svg>
    <svg width="0px" height="0px">
      <defs>
        <filter id="InSh">
          <feOffset dx="0" dy="-4"/>
          <feGaussianBlur stdDeviation='0'result="offset-blur"/>
          <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
          <feFlood flood-color="#000" flood-opacity=".6" result="color"/>
          <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
          <feComposite in="shadow" in2="SourceGraphic"/>
        </filter>
      </defs>
    </svg>
    <svg id='HB' xmlns="http://www.w3.org/2000/svg" width="172.199" height="114.022" viewBox="0 0 172.199 114.022">
      <g >
      <path id="H2" fill="#999" d="M81.162 47.896C57.47 40.32 49.59 16.226 49.59 16.226v81.57s7.88-22.967 31.572-30.543c23.693-7.576 36.625-6.97 36.625-6.97v-6.54s-12.932 1.73-36.625-5.847z"/>
      <path id="H3"  stroke="#CCCCCC" stroke-width='2' fill="#666" d="M54.48 57.01c0 22.526-2.19 39.786-4.89 39.786-2.702 0-4.892-17.26-4.892-39.785s2.19-39.78 4.89-39.78c2.703 0 4.892 17.26 4.892 39.786z"/>
      <path fill="#777" d="M121.8 59.475c0 1.5-.742 2.718-1.655 2.718h-3.773c-.914 0-1.24-1.217-1.24-2.718v-4.927c0-1.5.326-2.718 1.24-2.718h3.773c.914 0 1.654 1.217 1.654 2.718v4.927z"/>
      <path id="H1" stroke-miterlimit="10" fill="#C1272D" d="M148.712 33.524c-10.122 0-18.723 6.415-22.025 15.392h-5.858c-1.416 0-1.92 1.145-1.92 2.556V62.55c0 1.412.504 2.556 1.916 2.556h5.856c3.302 8.976 11.903 15.392 22.025 15.392 12.972 0 23.487-10.516 23.487-23.487S161.68 33.528 148.71 33.528z"/>
      <path id="H4"  fill="#fff" opacity='.4' d="M155.718 40.938c0 2.61-3.358 3.726-7.5 3.726s-7.5-1.116-7.5-3.726 3.358-4.726 7.5-4.726 7.5 2.116 7.5 4.726zm7.368 3.194c-.608.93-2.064.546-3.54-.418s-2.413-2.144-1.805-3.074c.61-.93 2.3-.902 3.78.062s2.18 2.5 1.57 3.43z"/>
      </g>
      <g fill="none">
        <path id="H2T" d="M69.914 49.02C46.22 41.445 38.34 4.98 38.34 4.98v104.065s7.88-35.34 31.573-42.917c23.693-7.576 47.873-5.846 47.873-5.846v-6.538s-24.18 2.855-47.872-4.72z"/>
        <path id="H3T" d="M43.232 57.01c0 22.526-2.19 52.034-4.89 52.034S33.45 79.536 33.45 57.01s2.19-52.03 4.89-52.03 4.892 29.508 4.892 52.033z"/>
        <path id="H1T" d="M148.712 46.772c-10.122 0-18.723-6.833-22.025 2.144h-5.858c-1.42 0-1.92 1.145-1.92 2.556V62.55c0 1.412.5 2.556 1.91 2.556h5.854c3.302 8.976 11.903 2.144 22.025 2.144 12.972 0 25.487 2.51 25.487-10.24S161.672 46.772 148.7 46.772h.007z"/>
        <path id="H4T" d="M155.718 50.668c0 2.125-3.358 3.847-7.5 3.847s-7.5-1.723-7.5-3.847 3.358-1.405 7.5-1.405 7.5-.72 7.5 1.405zm7.112.01c-.053 1.005-1.365 1.368-2.956 1.286s-2.86-.578-2.807-1.583c.052-1 1.384-.89 2.975-.81s2.84.11 2.787 1.11z"/>
      </g>
      <g id='HL' fill="none" opacity='0' stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
        <path d="M60 57.01l-18.198 56.012"/>
        <path d="M60 57.01L12.248 91.63"/>
        <path d="M60 57.01H1"/>
        <path d="M60 57.01L12.248 22.395"/>
        <path d="M60 57.01L41.693 1"/>
      </g>
    </svg>
    </div>
    
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js"></script>

body{  
  user-select: none;
  overflow:hidden;
}

#container{
  width:500px; height:420px;
  position:absolute;
  transform:translate(-50%,0%);
  left:50%; top:20px;
}

#svg{
  position:absolute;
  left:0px; top:0px;
  border:10px solid #444;
  border-radius:20px;
}


#HB{
  position:absolute;
  right:-75px; bottom:-30px;
  transform: rotate(25deg);
  overflow:visible;
  cursor: pointer;
}

var CY=270,Doc=document,B=Doc.getElementById('B'),W=Doc.getElementById('W'),
    Es=Elastic.easeOut.config(1.4,0.1),TwL=TweenLite,TwM=TweenMax,ee=Doc.querySelectorAll('.eye'),RT=TwL.to({},0,{}),pls=1,
    owlS=Doc.createElement('audio'),hornS=Doc.createElement('audio'),huh1=Doc.createElement('audio'),huh2=Doc.createElement('audio');
var Asrc = 'http://www.freesound.org/data/previews/';
owlS.src=Asrc+'251/251937_2289882-lq.mp3'; owlS.volume=.5; 
hornS.src=Asrc+'27/27880_208079-lq.mp3'; hornS.volume=.2;  
huh1.src=Asrc+'241/241514_950925-lq.mp3'; huh1.volume=.1; 
huh2.src=Asrc+'242/242606_950925-lq.mp3'; huh2.volume=.1;
TwM.staggerTo(ee,0,{cycle:{rotation:[5,-5]},transformOrigin:'center'},0);
TwL.to(B,1,{transformOrigin:'bottom',opacity:1,onComplete:SF});
TwL.fromTo('#pls',0.8,{transformOrigin:'right bottom',scale:0.9},{opacity:1,scale:1,delay:2,ease:Back.easeOut});

Draggable.create(B,{throwProps:true,bounds:"#svg",onDrag:UF,onRelease:RF,onPress:PF});
function PF(){ 
  hidePls(); owlS.pause(); owlS.currentTime=0; huh2.play();
  tl.pause();
  TwL.fromTo(ee,0.2,{scaleY:0},{scaleY:1.3,ease:Back.easeOut});
  TwM.to(B,1,{scaleY:1,ease:Es});
  TwM.staggerTo('#wing-l,#wing-r',1,{cycle:{rotation:[R(0,10),R(-10,0)]},ease:Es},0);
};
function RF(){
  RT=TwL.to(B,11,{y:0,ease:Es,onUpdate:UF,onComplete:SF});
  TwL.to('#wing-l,#wing-r',11,{rotation:0,ease:Es});
  TwL.to(ee,0.5,{scaleY:1});
};
function UF(){
var bt=B._gsTransform,Y;
if(bt.y>=-1){Y=bt.y+CY}else{Y=CY};
  TwL.set('#foot',{y:bt.y*-0.06});
  TwL.set(W,{attr:{d:"M0,270 L"+(bt.x-17+CY)+","+Y+" 500,270"},strokeWidth:((CY)/Y)*6});
};
function SF(){ tl.play(0); };
var tl=new TimelineLite({paused:true})
  .to(B,0.5,{scaleY:1.05})
  .to(ee,0.15,{scaleY:0.5},0).to(ee,0.2,{scaleY:1},0.15)
  .add(function(){owlS.play()})
  .to(B,4,{scaleY:1,ease:Elastic.easeOut})
  .staggerTo(ee,1,{cycle:{scaleY:[0.25,0.1]},ease:Es},0,1.5)
  .to(B,2,{scaleY:1.07,yoyo:true,repeat:-1,ease:Sine.easeInOut});
TwM.staggerTo('#sun circle',1,{scale:0.92,repeat:-1,yoyo:true,ease:Sine.easeInOut,transformOrigin:'center'},0.5);
var hornTl = new TimelineLite({paused:true})
  .fromTo('#HL path',0.15,{drawSVG:'50% 100%',opacity:1},{opacity:0,drawSVG:'100% 100%'},'H')
  .fromTo('#HL',0.15,{stroke:"#555",transformOrigin:'center',scale:0.8},{x:-10,opacity:1,scale:1,},'H')
  .staggerTo(['#H1','#H2','#H3','#H4'],0.15,{cycle:{morphSVG:['#H1T','#H2T','#H3T','#H4T']},repeat:1,yoyo:true},0,'H');
TwL.delayedCall(1,function(){
Doc.getElementById('HB').addEventListener('click',function(){
  hidePls(); hornTl.restart(); hornS.currentTime=0; hornS.play(); owlS.pause(); owlS.currentTime=0;
  if(!RT.isActive()){ PF(); TwL.killDelayedCallsTo(RF); TwL.delayedCall(0.3,RF);}else{ huh1.play(); }
    TwL.fromTo(B,1,{scaleY:1.05},{scaleY:1,ease:Es});
    TwL.fromTo(ee,0.5,{scaleY:0},{scaleY:R(0.95,1.2),ease:Back.easeOut});
    TwM.staggerFromTo('#wing-l,#wing-r',1,{cycle:{rotation:[R(0,20),R(-20,0)]}},{rotation:0,ease:Es},0);
});
});
function hidePls(){if(pls){TwL.to('#pls',0.2,{opacity:0})}};
function R(min,max) {return min+Math.random()*(max-min)};