0

I am trying to animate my mouseY and mouseX values to zero (over the course of .5 seconds) whenever the mouse exits a specific container.

Here is my code.

function ondocumentMouseLeave ( event ){


                var intersects = ondocumentMouseLeave (true)

                new TWEEN.Tween( intersects[ 0 ].mouseY ).to( {
                    x: 0 }, 500 )
                .easing( TWEEN.Easing.Elastic.Out).start();

                new TWEEN.Tween( intersects[ 0 ].mouseX ).to( {
                    x: 0}, 500)
                .easing( TWEEN.Easing.Elastic.Out).start();


            }

I know this is recursive but how do I just get the animation to start when the mouse leaves?

I apologize if this is a simple question.. but I am quite new to this.

edit:

I tried this:

function ondocumentMouseLeave ( event ){

                event.preventDefault();


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

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

But it gave me this error

"Uncaught TypeError: Cannot create property 'y' on number '-56'"

Does that mean it is conflicting with another function that is currently setting mouseX and Y?

Because if I write this:

function ondocumentMouseLeave ( event ){

        mouseX = 0
        mouseY = 0
        }

it functions and does NOT give me an error, but it also does not animate to these values.

What am I doing wrong?

nballiett
  • 7
  • 5
  • Your "recursive" function makes no sense at all to me. Your are assigning the return value of `ondocumentMouseLeave` to `intersects`. However, this function doesn't return anything. Your recursive function seems like an infinite loop to me, there is no exit condition. And I don't get the point why it needs to be recurisuve? So, what do you want to animate exactly? – Brakebein Feb 02 '16 at 09:48
  • I do not want it to be recursive, its not working because right now it IS an infinite loop. I want to animate mouseX and mouseY to zero whenever the the mouse leaves the assigned container...I am just not sure how to do this... – nballiett Feb 02 '16 at 13:50
  • Do not use `{ y: 0 }`. Start and end value needs to be the same type. Do it like `...Tween( mouseY ).to( 0, 500)...` – Brakebein Feb 02 '16 at 16:17
  • Okay it is no longer giving me an error, however nothing is happening on `mouseleave` now. The `mouseX` and `mouseY` values do not animate to zero. – nballiett Feb 02 '16 at 16:54
  • Do you call `TWEEN.update();` in your render loop? – Brakebein Feb 02 '16 at 17:11
  • Yes. Would it be helpful if I posted all of the code?[link](https://jsfiddle.net/cxp8rex2/2/) – nballiett Feb 02 '16 at 17:28
  • Maybe yes. Where do you get `mouseX` and `mouseY` from? Do you actually want to move/set/animate your mouse cursor? That's not possible yet: http://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position – Brakebein Feb 02 '16 at 17:37
  • Here is a jsfiddle: https://jsfiddle.net/cxp8rex2/2/ it doesnt function because of the scripts I call, and NO I am not trying to animate the mouse cursor. – nballiett Feb 02 '16 at 17:50
  • You could add `onUpdate` for debugging: `...to ( 0 , 500).onUpdate( function() { console.log(mouseY); } ).start();` – Brakebein Feb 03 '16 at 14:35

0 Answers0