Tips for seamlessly expanding the video container as it enters the viewport using Nuxtjs

I'm currently working on a webpage that needs to have similar functionality to this example. I'm using Nuxt for the project, but I'm encountering challenges in getting the video to expand and shrink in the exact same way.

To demonstrate the issue, I've tried replicating it on StackBlitz here. However, the custom directive isn't behaving as expected. My goal is to achieve a seamless transition when the video enters the view-port.

Here's the code snippet for the custom directive:

export default {
  directives: {
    inView: {
      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();
      }
    }
  }
}

Answer №1

Don't rely on a scroll listener, opt for an IntersectionObserver to monitor when the element enters or exits the viewport. The code snippet below demonstrates setting up an IntersectionObserver with a threshold of 30%, assigning the value of binding.arg as a CSS class to the element when it is in view:

export default {
  directives: {
    inView: {
      mounted(el, binding) {
        const threshold = 0.3 // activate callback when element is 30% in view
        const observer = new IntersectionObserver(entries => {
          const elem = entries[0]
          if (elem.intersectionRatio >= threshold) {
            el.classList.add(binding.arg);
          } else {
            el.classList.remove(binding.arg);
          }
        }, { threshold })
        observer.observe(el)
        binding.instance.observer = observer
      },
      unmounted(el, binding) {
        binding.instance.observer.disconnect()
      },
    }
  },
}

Apply the directive on the video-wrapper element to trigger animations (with scale as the animation class):

<div v-in-view:scale class="video-wrapper">

Check out the demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding application size by incorporating third-party libraries in NPM and JavaScript

My friend and I are collaborating on a project. When it comes to programming, he definitely has more experience than I do, considering I've only been coding for a little over a year. I've noticed that he prefers building components and function ...

What is the best way to retrieve a date from MySQL that is exactly 30 days ahead of today using PHP

My coding skills are lacking, so here is my current code (retrieve date from mysql = today --> alert) and I'm seeking assistance to modify it to (retrieve date from mysql + 30 days = today --> alert) <?php $check=mysql ...

As soon as I execute this code, the Meta slider vanishes without a trace

I am experiencing a strange issue with my Meta Slider on the homepage and I can't figure out why. Every time I add a certain code snippet, my drop-down text feature starts working but the Meta slider disappears. However, as soon as I remove the code, ...

A guide to showcasing the array index in a vuetify data table

I am working with a server response that includes an array of data passed to my Vue instance. I have successfully created a data table using this array, but I am unsure how to display the index of the array for a serial number. Below is a snippet of my co ...

Require assistance in generating three replicas of an object rather than references as it currently operates

I am encountering an issue with my code where I seem to be creating 4 references to the same object instead of 4 unique objects. When I modify a value in groupDataArrays, the same value gets updated in groupDataArraysOfficial, groupDataArraysValid, and gro ...

Encountered an unanticipated symbol at column 2 while using the Angular Google Recaptcha

I have integrated the Angular Google Recaptcha directive into my application from https://github.com/VividCortex/angular-recaptcha. However, upon running my application, I encountered an error stating that I am using my public key instead of my private key ...

I need to figure out how to incorporate a specific feature into my personal list by leveraging Javascript

Looking at the list below, it's a simple one that allows users to add and remove items while also changing their order using buttons. However, I want to enhance this feature by removing the "up" button for the first item and the "down" button for the ...

Experiencing difficulties replicating two auto-scrolling divs

I have implemented a script to automatically slide two different divs. Here is the code I am using: The HTML: <div id="gallery"> <div id="slider" style="width: 6000px; left: -500px;"> <div><aside class="widget widget_testimoni ...

nodemailer failed to authenticate login: 535 Authentication Error

I'm encountering a 535 Authentication Failed error when trying to utilize the nodemailer npm package in my node application for sending emails through the contact page. My email and password are correct, so I'm unsure why this issue is arising. v ...

Cross-Origin Request Blocked: "Sorry, we can only support requests for protocol schemes using HTTP" and so on

I have been working on setting up a simple application that involves an Express backend which returns a JSON string when accessed at localhost:4201/ticker. However, I encountered an issue while trying to make a request to this link from my Angular Service ...

What is the solution for fixing the [$injector:unpr] error in AngularJS?

I've recently started learning AngularJS and I'm encountering an issue with injecting a service from another file. Despite trying various methods, nothing seems to be working. Here's a snippet from my index.html: ` <!DOCTYPE html> &l ...

Encountering a Material UI error: Incorrect hook usage when combining create-react-library with MUI

After transitioning from Material Ui v3 to v4 on a create-react-library project, I encountered an issue. This particular project serves as a dependency for other projects in order to share components. However, when attempting to display a material-ui compo ...

Adjusting the alignment of a facial image on Canvas by selecting specific click-points

I have a unique idea for an app that allows users to correct a tilted face with just 2 clicks The concept is simple - users click on the middle of the nose and the middle of the eyebrows within the image to generate two points: eyebrowMiddle(x1,y1) and no ...

What makes Angular date pickers sluggish?

Have you ever noticed that Angular JS date pickers consume a lot of CPU? When multiple date pickers are present on a page, they can noticeably reduce the site's speed. Is there a way to minimize this issue? Take for example the official Angular for ...

The Forge Viewer's getState() function is providing inaccurate values for individual items

In our Angular application, we have integrated the latest version of Forge Viewer and are storing the current state of the viewer in our database for future restoration. After thorough testing, we discovered that isolated nodes are not being saved correct ...

What is the best way to trigger a filter function that has been stored in a variable?

I need assistance with executing a filter function stored in a variable when the user clicks a button. The function enableFilter must compare item.id with item.category and trigger the filter if they match. Can someone provide guidance on how to achieve ...

Ways to determine if a textbox is empty and trigger a popup notification with jQuery

I'm having trouble with checking if the textbox is empty in my form. Every time I try to submit, instead of receiving an alert message saying "Firstname is empty," I get a message that says "Please fill out filled." ('#submit').click(func ...

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

Tips for identifying and retrieving the checkbox and select box values in ASP.NET

I am trying to figure out how to detect the selected checkbox values and select box entries in my registration form. Here is the select: <p><label for="favorite">Favorite Player</label> <select name = "favor"> <o ...

The UI encountered an error with updating job status in mediaconvert due to excessive requests using the javascript SDK

This platform utilizes React Js for the frontend and nodeJs for the backend. It is hosted on an AWS EKS cluster and functions as a video portal where users can upload videos. These videos are processed using AWS mediaconvert and stored in S3 once processin ...