glitch in animation when quickly mousing over and out

How can I resolve an animation glitch that occurs when quickly hovering over and then off an element?

You can view the live version of the website at -

Whenever I rapidly hover on and off the circle, it starts acting buggy. It happens consistently, so I'm really hoping there's a solution available.

<div class="hover-circle" @mouseover="hoverCircle" @mouseout="leaveCircle">
      <div class="circle"></div>
      <span>Enter</span>
    </div>

hoverCircle(e) {
      gsap.to(".hover-circle .circle", {
        duration: 1,
        scale: 1.3,
        ease: "power4.out"
      });
      gsap.to(`.home-${this.currentComponent}`, {
        delay: 0.1,
        duration: 1,
        scale: 1.05,
        ease: "power4.out"
      });
    },
    leaveCircle() {
      gsap.to(".hover-circle .circle", {
        duration: 0.5,
        scale: 1,
        ease: "power4.inOut"
      });
      gsap.to(`.home-${this.currentComponent}`, {
        duration: 0.5,
        scale: 1,
        ease: "power4.inOut"
      });
    },
javascriptvue.js

Answer №1

The issue lies in the inclusion of a delay on the hoverCircle function. When both the hoverCircle and leaveCircle functions are triggered within a duration less than 0.1s, the delayed animation from hoverCircle ends up being executed after the animation from leaveCircle. To resolve this, consider removing the delay.

Additionally, it is recommended to halt any ongoing animations on the target element when entering and exiting. This can be achieved using...

gsap.killTweensOf(target)

..., as detailed here. For your specific scenario, the implementation might resemble the following:

hoverCircle() {
  gsap.killTweensOf(".hover-circle .circle");
  gsap.to(".hover-circle .circle", {
    duration: 1,
    scale: 1.3,
    ease: "power4.out"
  });
  gsap.killTweensOf(`.home-${this.currentComponent}`);
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 1,
    scale: 1.05,
    ease: "power4.out"
  });
},
leaveCircle() {
  gsap.killTweensOf(".hover-circle .circle");
  gsap.to(".hover-circle .circle", {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
  gsap.killTweensOf(`.home-${this.currentComponent}`);
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
}

If this process is implemented in multiple instances, it is advisable to consolidate it into a single method named stopAnimations:

hoverCircle() {
  this.stopAnimations();
  gsap.to(".hover-circle .circle", {
    duration: 1,
    scale: 1.3,
    ease: "power4.out"
  });
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 1,
    scale: 1.05,
    ease: "power4.out"
  });
},
leaveCircle() {
  this.stopAnimations();
  gsap.to(".hover-circle .circle", {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
  gsap.to(`.home-${this.currentComponent}`, {
    duration: 0.5,
    scale: 1,
    ease: "power4.inOut"
  });
},
stopAnimations() {
  gsap.killTweensOf(".hover-circle .circle");
  gsap.killTweensOf(`.home-${this.currentComponent}`);
}

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

Tips for sending TypeScript objects to Vue components

Currently, I am working with the Vue 2 composition API plugin along with typescript version 3.9.7. In my project, I have a simple type defined as Usp which I want to pass as a prop to a component named UspSection. The structure of the USP type is outline ...

typescriptvue.jsvue-composition-api

What's the best way to set up server-side pagination for mui-datatable?

Is server-side pagination for mui-datatable implementation a complex task? Challenges: I am facing difficulties in capturing the user-selected value from the rowsPerPage options. When a user selects '15', how can I update these values within ...

javascriptreactjsmaterial-uimui-datatable

Tips on transforming JSON output into an array with JavaScript

Looking for a solution to convert a Json response into an array using JavaScript. I currently have the following json response: ["simmakkal madurai","goripalayam madurai"]. I need to transform these results into an array format. Any suggestions on how I ...

javascriptphphtml

What is the best way to acquire the href value from this source?

Looking to extract the dynamic value "3 Sent" from the html snippet provided. How can this be achieved? <ul class="nav nav-tabs some-tabs"> <li class="active"> <a href="#accepted" data-toggle="tab">1 Accepted</ ...

javascriptseleniumselenium-webdriver

Display the outcomes of two MongoDB queries simultaneously on a single page

As I dive into the world of MongoDB and Node.js/Express, I find myself struggling to fully grasp some of the concepts. Forgive my inexperience, but I haven't been able to locate a clear answer for what I'm trying to achieve. My goal is straight ...

javascriptnode.jsmongodbexpress

Mastering advanced authentication with Passport and the JwtStrategy

During a recent project I downloaded from the internet... In one specific part of the code, the following is implemented: passport.use(new JwtStrategy({ secretOrKey: credentials.secret, jwtFromRequest: ExtractJwt.fromAuthHeader(), }, ...

javascriptnode.jsexpresspassport.jspassport-local

Creating a complex array structure using checkbox inputs within an Angular application

In my Angular application, I have a list of checkboxes that are dynamically generated using nested ng-repeat: <div ng-repeat="type in boundaryPartners"> <div class="row" ng-show="showBPtype[$index]"> <div class="col-xs-12"> ...

javascriptarraysangularjs

In what situations is it essential to utilize the `rerender` function in the React Testing Library?

In the past, my team and I usually focused on writing React Testing Library (RTL) tests for the main parent components that contained numerous nested child components. This approach made sense and proved to be effective. The child components in question we ...

javascriptreactjsreduxreact-testing-library

Error: Unable to locate module: Unable to resolve 'next/web-vitals'

I keep encountering the following error message: Module not found: Can't resolve 'next/web-vitals' I am interested in utilizing the **useReportWebVitals** feature from next/web-vitals. For more information, please visit: Optimizing: Analyt ...

javascriptreactjsnext.jscore-web-vitalsweb-vitals

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

javascripthtmlcss

"Using ng-include with ng-show doesn't seem to be functioning properly

I am facing an issue with my Angular app where the template is getting too large. I would like to split it and utilize the ng-include directive, but I am struggling to get it to work properly. current state of template.html <div class="edit-ob ...

javascriptangularjs

Is it possible to prefetch library calls in Next.js in advance?

Recently, I started working with GeoChart using react-google-charts (https://github.com/RakanNimer/react-google-charts). However, I noticed that several scripts load after the entire process is completed. In my scenario, is loading towards the end. Is t ...

javascriptnext.jsreact-google-charts

Converting a PHP array to a JavaScript array causes an issue of undefined variable when attempting to access a PHP array that has

I've been searching through other questions without finding the answer, so I'm reaching out for help with my specific issue. My problem is transferring a php array to a javascript array. In my code editor (phpStorm), I'm getting an error st ...

javascriptphpjqueryhtmllaravel

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

javascriptcssreactjs

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

I have a JavaScript code that works well when the hyperlink below is clicked: <a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a> <script> function ConfirmDelete() { var ans ...

javascriptjqueryhtmlbuttonhyperlink

Vue composable yields a string value

I am currently using a Vue composable method that looks like this: import { ref } from 'vue'; const useCalculator = (num1: number, num2: number, operation: string) => { const result = ref(0); switch (operation) { case 'add& ...

javascripttypescriptvue.js

Are there any drawbacks to converting all instance methods into arrow functions in order to prevent binding loss?

What are the potential drawbacks of converting all instance methods into arrow functions to avoid the "lost binding" issue? For example, when using ReactJS, the statement onClick={this.foo} can lead to lost binding, as it translates to createElement({ ... ...

javascriptreactjsecmascript-6arrow-functions

Auto-complete feature not populating the input field in Google Chrome

Within my register form, I have various INPUT tags present. One of these INPUTs has the name email. <input type=text name=email id=email> When filling out this form in Chrome, I encounter a peculiar behavior. Upon clicking on the email input field ...

javascriptjquerygoogle-chrome

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

Troubleshooting a vee-validate error for a field that does not actually exist, showing up

Whenever I attempt to validate my fields using VeeValidate, an error message appears. The error only shows up after submitting the form and successfully sending data. I'm in need of some assistance, can anyone help me with this issue? vee-validate.e ...

vue.js