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

Retrieve information from arrays within objects in a nested structure

I am working with structured data that looks like the example below: const arr = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: 'Redwood forest& ...

javascriptvue.jsecmascript-6

Exploring Angular2: The Router Event NavigationCancel occurring prior to the resolution of the Route Guard

My application has routes protected by an AuthGuard that implements CanActivate. This guard first checks if the user is logged in and then verifies if certain configuration variables are set before allowing access to the route. If the user is authenticated ...

javascriptangulartypescriptroutes

What is the best way to display a SolidJS component on the screen?

I am currently working on a unique menu design for my application. The concept involves rendering a functional component within an element created in the body using createRoot and render methods. https://i.stack.imgur.com/g6Ofv.png export function create ...

javascripthtmldomsolid-js

Retrieving data attributes from model within a Backbone view using Underscore template

I have a Backbone.js view that I'm working with: var StreamV = Backbone.View.extend({ tagName: 'div', className: 'stream', events: { }, initialize: function () { this.listenTo(this.model, 'change' ...

javascriptbackbone.jsunderscore.js-templating

Tips for embedding a file within a text box in HTML and enabling users to make direct edits

I am currently working on a feature that allows users to open a .txt or .html file from their file explorer and paste the contents into a textarea for editing and saving purposes. My question is whether it's possible to read the file content and auto ...

javascripthtmljquerycss

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

Unreliable static URLs with Next.js static site generation

I've recently built a Next.js website with the following structure: - pages - articles - [slug].js - index.js - components - nav.js Within nav.js, I have set up routing for all links using next/link, including in pages/articles/[slug].j ...

javascriptroutesnext.js

Tips for passing a JavaScript array to an MVC controller

In my asp.net application, I have implemented a functionality where users can order food. Additionally, there is an admin page where admins can login and create a menu for a specific week. I have successfully developed the "Menu maker" feature where all me ...

javascriptc#jqueryajaxasp.net-mvc

Module cannot be resolved within react-viro

Having some issues running this application and receiving an error message. View the app code on GitHub here: https://github.com/vnovick/pile-blocks-ar I have followed the asset import instructions outlined here: . Despite following the steps correctly, I ...

javascriptreactjsreact-native

What could be causing my resize event to not trigger?

My goal is for the #sequence div to be full height of the browser window when the window size is greater than 920px in height. In such cases, I also want to trigger a plugin. If the window size is lower than 920px, then the height of the #sequence div shou ...

javascriptjquerycssresizeheight

Using v-on:click to dynamically update multiple sections of content in a Vue.js and Liquid environment

Whenever I click on a button, I want the text and image to change. I attempted to do this but encountered difficulties in updating multiple elements simultaneously. {% for variant in product.variants %} <label for="variant_{{- variant.id }}"&g ...

javascriptvue.jsshopify

Interacting with Rails controllers through AJAX to trigger a JavaScript function

After exploring numerous stack overflow posts without finding a working solution, I decided to seek help for a well-documented use case. I have a button that should perform the following tasks: When clicked, call a custom controller method to update th ...

javascriptjqueryruby-on-railsrubyajax

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles: Automatically moving to the positive x-level whenever an Obsarbalve emits a new value. Moving manually to both positive and negative x-levels by dragging and dropping it. The manual drag a ...

javascripthtmlcssangulardrag-and-drop

Disabling a Field in Angular While Preserving its Value

Hey there, late night folks! I have a quick question about Angular. I'm working with a form that includes a specific field where I set the value using patchValue, but I also need to disable this field. The issue is that after disabling it, the value i ...

javascriptangulartypescript

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Looking for a solution with optimal performance, I am seeking to achieve the rearrangement of a list using either Angular2 or NodeJS. My input consists of user fruit preferences' IDs {15, 43, 55, 67, 98}; In addition, I have a JSON object containin ...

javascriptjsonnode.jsangular

RSS feed showing null xml data with jQuery

Working on coding a straightforward RSS feed utilizing jquery and pulling data from Wired. Everything appears to be functioning correctly, except for one issue - after the description, an unknown value of NaN is appearing in the result. It seems to be comi ...

javascriptjqueryxmlrssnan

Props in Vue components are exclusively accessible within the $vnode

Exploring the realm of Vue.js, I am tasked with constructing a recursive Component renderer that transforms JSON into rendered Vue components. The recursive rendering is functioning smoothly; however, the props passed to the createElement function (code b ...

javascriptvue.js

Utilizing jQuery for cloning elements

I need to add functionality for adding and deleting rows in multiple tables on my website. Currently, I am doing this by directly inserting HTML code using jQuery, but it has become inefficient due to the number of tables I have. I am considering creating ...

javascriptjqueryhtmlajax

What is the best way to duplicate a tag that contains multiple other tags with attributes?

My form, named 'myForm', needs a div tag with the id 'original' to be added every time I click a button. Can someone help me figure out how to add these tags? The new tags should appear after the original one, but still within myForm. ...

javascriptjqueryhtml

Keeping state between navigations in Ionic and AngularJS: A guide

In the process of developing my very first hybrid mobile application using Ionic and AngularJS, I have encountered a challenge that I am currently trying to resolve. The issue at hand involves maintaining the state of the graphical user interface between n ...

javascriptangularjsionic-framework