How to use the velocity-animate/velocity.min.js function in velocity-animate

if (!posY) {
            // set top position of form once we know how tall it should be,
            // to prevent overflowing the top/bottom of the viewport
            this.modalTop = `${docHeight / 2 - halfFinalHeight}px`;
          } else {
            const heightPlusMargin = finalHeight / 2 + 20,
              isInsideViewport = posY > heightPlusMargin && posY < docHeight - heightPlusMargin;

            this.modalTop = isInsideViewport ? `${posY - halfFinalHeight}px` : `${docHeight / 2 - halfFinalHeight}px`;
          }
          el.style.height = '100px'; // animate from 100px to auto height (auto)
          el.style.width = '100px'; // animate from 100px to auto width (600px)
          velocity(el, { opacity: 1 }, { duration: 100 });
          velocity(el, { width: 600 }, { duration: 180 });
          velocity(headerEl, { opacity: 1 }, { delay: 225, duration: 50 });
          velocity(innerEl, { opacity: 1 }, { delay: 225, duration: 50 });
          velocity(el, { height: finalHeight }, { delay: 35, duration: 240, complete: () => {
            // set the height to auto, so forms can grow if the fields inside them grow
            // (e.g. adding complex-list items)
            // el.style.height = 'auto';
            el.style.maxHeight = `calc(100vh - ${this.modalTop})`;
            done();
          } });
        });
      },

if (path === 'settings' || !posY) {
            // set top position of form once we know how tall it should be,
            // to prevent overflowing the top/bottom of the viewport
            this.formTop = `${defaultFormTop}px`;
          } else {
            const heightPlusMargin = finalHeight / 2 + 20,
              isInsideViewport = posY > heightPlusMargin && posY < docHeight - heightPlusMargin - 500;
              // give the bottom calculation about 500px more room, so complex-list items
              // don't overflow the bottom of the viewport (if they're opened when they don't have any items yet)

            this.formTop = isInsideViewport ? `${posY - halfFinalHeight}px` : `${defaultFormTop}px`;
          }
          el.style.height = '100px'; // animate from 100px to auto height (auto)
          el.style.width = '100px'; // animate from 100px to auto width (600px)
          velocity(el, { opacity: 1 }, { duration: 100 });
          velocity(el, { width: 600 }, { duration: 180 });
          velocity(headerEl, { opacity: 1 }, { delay: 225, duration: 50 });
          velocity(innerEl, { opacity: 1 }, { delay: 225, duration: 50 });
          velocity(el, { height: finalHeight }, {
            delay: 35,
            duration: 240,
            complete: () => {
            // set the height to auto, so forms can grow if the fields inside them grow
            // (e.g. adding complex-list items)
            // el.style.height = 'auto';
              el.style.maxHeight = `calc(100vh - ${this.formTop})`;
              el.style.height = 'auto';

              // manually reset the initial width of the indicator, see https://github.com/JosephusPaye/Keen-UI/issues/328
              if (this.$refs.tabs) {
                this.$refs.tabs.refreshIndicator();
              }

// set top position of form once we know how tall it should be,
            // to prevent overflowing the top/bottom of the viewport
            this.modalTop = `${docHeight / 2 - halfFinalHeight}px`;
          } else {
            const heightPlusMargin = finalHeight / 2 + 20,
              isInsideViewport = posY > heightPlusMargin && posY < docHeight - heightPlusMargin;

            this.modalTop = isInsideViewport ? `${posY - halfFinalHeight}px` : `${docHeight / 2 - halfFinalHeight}px`;
          }
          el.style.height = '100px'; // animate from 100px to auto height (auto)
          el.style.width = '100px'; // animate from 100px to auto width (600px)
          velocity(el, { opacity: 1 }, { duration: 100 });
          velocity(el, { width: 600 }, { duration: 180 });
          velocity(headerEl, { opacity: 1 }, { delay: 225, duration: 50 });
          velocity(innerEl, { opacity: 1 }, { delay: 225, duration: 50 });
          velocity(el, { height: finalHeight }, { delay: 35, duration: 240, complete: () => {
            // set the height to auto, so forms can grow if the fields inside them grow
            // (e.g. adding complex-list items)
            // el.style.height = 'auto';
            el.style.maxHeight = `calc(100vh - ${this.modalTop})`;
            done();
          } });
        });
      },

this.$nextTick(() => {
          velocity(el, 'fadeOut', { delay: 50, duration: 250, complete: done });
        });
      },

this.$nextTick(() => {
          velocity(el, 'fadeIn', { duration: 250, complete: done });
        });
      },

leave(el, done) {
        const headerEl = find(el, '.form-header'),
          innerEl = find(el, '.form-contents');

        velocity(el, { width: 100 }, { delay: 55, duration: 220 });
        velocity(el, { height: 100 }, { duration: 220 });
        velocity(headerEl, { opacity: 0 }, { duration: 50 });
        velocity(innerEl, { opacity: 0 }, { duration: 50 });
        velocity(el, { opacity: 0 }, { delay: 120, duration: 100, complete: done });
      },
      onResize() {

leave(el, done) {
        const headerEl = find(el, '.add-component-header'),
          innerEl = find(el, '.add-component-list');

        velocity(el, { width: 100 }, { delay: 55, duration: 220 });
        velocity(el, { height: 100 }, { duration: 220 });
        velocity(headerEl, { opacity: 0 }, { duration: 50 });
        velocity(innerEl, { opacity: 0 }, { duration: 50 });
        velocity(el, { opacity: 0 }, { delay: 120, duration: 100, complete: done });
      },
      close() {

leave(el, done) {
        const headerEl = find(el, '.form-header'),
          innerEl = find(el, '.form-contents');

        velocity(el, { width: 100 }, { delay: 55, duration: 220 });
        velocity(el, { height: 100 }, { duration: 220 });
        velocity(headerEl, { opacity: 0 }, { duration: 50 });
        velocity(innerEl, { opacity: 0 }, { duration: 50 });
        velocity(el, { opacity: 0 }, { delay: 120, duration: 100, complete: done });
      },
      onResize() {