Inadequate tweening adjustments upon mouse exit

When I try to tween a variable down to zero on mouseleave, nothing seems to happen when the mouse leaves the container. I've experimented with different approaches but can't figure out what I'm doing wrong.

Here's the code snippet in question:

 function ondocumentMouseLeave ( event ){


            new TWEEN.Tween( mouseY )
            .to ( 0 , 500 )
            .easing( TWEEN.Easing.Linear.None)
            .start();


            new TWEEN.Tween( mouseX )
            .to ( 0 , 500)
            .easing( TWEEN.Easing.Linear.None)
            .start();
            }

If you'd like to take a closer look, here's the jsfiddle link:

https://jsfiddle.net/cxp8rex2/16/

Sorry if this seems like a basic issue, I'm still getting the hang of things.

javascriptthree.jsmouseleavetween.js

Answer №1

To achieve smooth animation effects, it is recommended to utilize an Object and tween its properties as demonstrated below:

function handleMouseLeaveEvent(event) {

  var mouseCoordinates = {x: mouseXPosition, y: mouseYPosition};

  new TWEEN.Tween(mouseCoordinates).to({ x: 500, y: 500 }, 1000)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(function() {
        mouseXPosition = this.x;
        mouseYPosition = this.y;
    })
    .start();

}

Refer to the user guide of tween.js for further information.

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

Having trouble with AngularJS integration in Node.js Express framework?

My AngularJS HTML file is below, and I am accessing it using http://localhost:3000/modulename/create. However, the issue arises as AngularJS is not functioning properly. For example, the ng-repeat directive is empty in the template, whereas when we console ...

javascriptangularjsnode.jsangularjs-ng-repeatmean-stack

React modal image showing a misaligned image upon clicking

I recently integrated the react-modal-image library into my project to display images in a modal when clicked. However, I encountered an issue where the displayed image is off center with most of it appearing offscreen. I'm unsure what is causing this ...

javascripthtmlcssreactjs

Having trouble retrieving process variable in Vue3JS Vite project

In my Vue3 application, developed with Vite, I am integrating with a Solidity smart contract on Ropsten using web3js. Additionally, I am utilizing web3.storage to store images on IPFS, with the API key stored in a `.env` file at the project root: VUE_APP_A ...

javascriptvue.jsweb3jsviteipfs

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

Error encountered when attempting to retrieve JSON data in JavaScript due to being undefined

A snippet of code that reads and writes JSON data is presented below: var info; $(function () { $.getJSON("data.json", function (d) { info = d; }); $('.btn').click(function () { info['c-type'] = $('#c- ...

javascriptjqueryjson

When Mui Select is used with grouping, it automatically selects the first option as the default

When Mui Select with grouping is first rendered, it automatically selects the first option, which may seem strange. const generateOptions = useCallback((options: ISelectOption[]) => { return options.map((opt, ind) => { if ...

javascriptreactjsmaterial-ui

`replaceWith function limited to single use`

I'm encountering an issue where the replaceWith function is only working on the first instance. Even though I am getting updated data, it's not being written to the div after the initial replacement. $( "#searchboxform" ).keyup(function() { ...

javascriptjqueryajaxreplacewith

Sass: Setting a maximum width relative to the parent element's width

I have a resizable container with two buttons inside, one of which has dynamic text. Within my scss file, I am aiming to implement a condition where if the width of the container is less than 200, then the max width of the dynamic button should be 135px, ...

javascriptcsssass

Unable to remove the "d-none" class using Bootstrap 4

Wondering if it's possible to remove the "d-none" class using JavaScript? This is the code snippet I currently have: <div id="progressBar" class="progress d-none"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria- ...

javascriptjquerytwitter-bootstrap-3bootstrap-4

Angular 6 canvas resizing causing inaccurate data to be retrieved by click listener

The canvas on my webpage contains clickable elements that were added using a for loop. I implemented a resizing event that redraws the canvas after the user window has been resized. Everything works perfectly fine when the window is loaded for the first ti ...

javascriptangularhtml5-canvas

Steps for creating a monochromatic blinking background for notifications

Upon receiving a notification, I retrieve it from the database and activate the blinking effect on the notification box. However, I would like to stop the blinking once the user clicks to view the notification and maintain a single color display. For examp ...

javascriptjqueryajax

Is it possible to adjust an attribute within a button based on specific conditions by using a flag in the controller with AngularJS?

<button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert-modal"></button> In my HTML, there is an attribute named "data-modal-target" that triggers a modal when ng-click is activated. I want ...

javascriptangularjshtml

Hide buttons on click in textarea

I am working on a user input interface which includes a textarea for typing, along with a cancel and submit button. Is there a way to show the cancel and submit buttons only when the user clicks inside the textarea? (I prefer using vanilla JavaScript inst ...

javascripthtmlcss

Cannot use MaterialUI Textfield/Input on iPhone devices

Recently, I encountered an issue with iPhone users being unable to type in Textfield or Input components in apps developed using MaterialUI, even when the value and setValue were properly configured. To solve this problem for each component individually, ...

javascriptreactjsinputreact-hooksmaterial-ui

Exploring the history and present state of Vue lifecycle hooks

Is there a way to access previous and current data in the updated lifecycle hook in Vue, similar to React? I want to be able to scroll a list of elements to the very bottom, but for this I need: The already rendered updated DOM (to calculate the scroll) ...

javascriptvue.jsscrollvuejs2hook

Eliminating empty elements from arrays that are nested inside other arrays

I am facing a challenge with the array structure below: const obj = [ { "description": "PCS ", "children": [ null, { "name": "Son", ...

javascriptarraystypescriptjavascript-objects

Display the output based on checkbox selection using JavaScript

I am working on a feature where I need to capture checkbox inputs using JavaScript and then store them in a PHP database. Each checkbox corresponds to a specific column in the database. If a checkbox is checked, I want to insert its value into the databa ...

javascriptphphtmlcheckbox

Creating a backup link for a video player component in NextJs

My aim is to make sure that two video player components in a NextJS application can still access and play videos even when the application is running locally using npm run dev without an internet connection. Currently, these two components.. <HoverVi ...

javascriptreactjstypescriptnext.js

exploring the use of background threads in jQuery and JavaScript

Here's an interesting scenario to consider... As I work on my Java web project, utilizing AJAX to store large amounts of data in a database using a separate thread. Everything seems to be functioning as expected. However, something has me puzzled... ...

javascriptjquerymultithreading

Oops: Looks like there is already a request for 'PUBLIC_requestAccounts' pending from http://localhost:3000. Just hold tight for now

There comes a moment when an unexpected error arises and fails to establish a connection with your wallet. if (window.ethereum) { console.log("11") const connect = async () => { const account = await window.ethereum.request({ ...

javascriptnext.jsethereummetamask