Download animation - code helper

xxxxxxxxxx
 
<div style="height: 100vh">
    <div class="container color-block blue-gradient">
      <i class="fas fa-arrow-down arrow"></i>
      <div class="floor">
        <div class="box peach-gradient"></div>
        <div class="box peach-gradient"></div>
        <div class="box peach-gradient"></div>
        <div class="box peach-gradient"></div>
      </div>
      <button class="btn peach-gradient button">Download</button>
    </div>
  </div>

xxxxxxxxxx
 
.container {
    background-color: #333;
    height: 100%;
    color: #eee;
    font-size: 9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
​
.floor {
    background-color: #eee;
    width: 200px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    padding: 3px;
}
​
.box {
    height: 100%;
    flex-basis: 25%;
    border-radius: 10px;
    opacity: 0;
    transition: all 0.3 ease-in;
}
​
.arrow {
    position: relative;
    top: -100%;
    transform-origin: bottom center;
}
​
.button {
    margin-top: 100px;
}
​

xxxxxxxxxx
 
$(document).ready(function () {
​
      function animate() {
        const $arrow = $('.arrow');
        const $floor = $('.floor');
        $('.box').css({opacity: 0})
        $arrow.velocity({
          opacity: 1,
          top: '10px'
        }, {
          duration: 900,
          easing: "swing",
          complete: function() {
            $('.box:nth-child(1)').css({opacity: 1})
          }
        }).velocity({
          rotateZ: '-45'
        }, {
          duration: 700,
          easing: 'ease-in',
          complete: function () {
            $('.box:nth-child(2)').css({opacity: 1})
            $floor.velocity({
              rotateZ: '-30'
            }, {
              delay: 0,
              duration: 400,
              easing: 'ease-in'
            })
            $arrow.velocity({
              rotateZ: '-75'
            }, {
              delay: 0,
              duration: 400,
              easing: 'ease-in',
              complete: function () {
                $('.box:nth-child(3)').css({opacity: 1})
                $arrow.velocity({
                  left: '-60',
                  top: '60'
                }, {
                  delay: 0,
                  duration: 400,
                  easing: 'ease-in'
                }).velocity({
                  left: '-60',
                  top: '60',
                  rotateZ: -160,
                }, {
                  duration: 400,
                  complete: function () {
                    $('.box:nth-child(4)').css({opacity: 1})
                    $arrow.velocity({
                      top: '100vh',
                      left: '-60',
                      rotateZ: -180,
                    }, {
                      easing: 'ease-in',
                      delay: 0,
                      duration: 1200,
                    })
                    $floor.velocity({
                      rotateZ: 0
                    })
                    $arrow.velocity({
                      top: '-100%', 
                      rotateZ: 0,
                      left: 0,
                      opacity: 0
                    }, 10)
                  }
                })
              }
            })
          }
        })
      }
​
      $('.button').on('click', animate);
​
    });

Console errors: 0