How to expand the video container smoothly as it comes to viewport in Nuxtjs

I have to make a webpage very similar to this one. I'm using Nuxt for this, I'm facing issues in making the video expand & shrink in the exact same way.

I've tried to replicate the issue on StackBlitz here. The directive is not working correctly actually. I want to achieve exactly the same transition as soon as the video enters into the view-port.

Code of the custom directive -

inFocus: {
      isLiteral: true,
      inserted: (el, binding, _) => {
        const isInView = () => {
          const rect = el.getBoundingClientRect();
          const inView = (rect.width > 0 && rect.height > 0 && rect.top >= 0 &&
            (rect.bottom + 100) <= (window.innerHeight || document.documentElement.clientHeight));
          if (inView) {
            el.classList.add(binding.value);
            // window.removeEventListener('scroll', isInView);
          } else {
            el.classList.remove(binding.value);
          }
        };
        window.addEventListener('scroll', isInView);
        isInView();
      }
    }

from Recent Questions - Stack Overflow https://ift.tt/3zB9gQm
https://ift.tt/eA8V8J