Move bubbles x and y with respect to which direction the mouse hits them with

[nkc524]

Hi,

So I have a tank full of bubbles and am wanting to move each bubble depending on where the mouse touches them with.

 

For example, in the screenshot above I would want to move bubble 46 -> x:0, y: -7. But for some reason the bubbles just go to the top left corner whenever it is touched with the mouse. The values show up in the console.log, so I am unsure of where this is going wrong.

I have two event listeners with a gsap.to tween inside one of them. Below you can find a code snippet for them. Hopefully this makes sense and let me know if you need anything else in order to better understand the issue going on.

Thanks in advance!

 

useEffect(() => {

    let bubbles = document.querySelectorAll(".bubble");

    let tank = document.querySelector(".tank");

    var xMove;

    var yMove;

   

    const getMovement = (e) => {

      xMove = e.movementX;

      yMove = e.movementY;

     

      console.log(xMove, yMove);

    }

 

    const moveBubble = (idx, xMove, yMove) => {

      console.log(xMove, yMove, idx);

      gsap.to(`.bubble-${idx}`, {

        x: xMove,

        y: yMove,

        duration: 3

      })

    }

     

    tank.addEventListener('mousemove', (e) => getMovement(e));

    bubbles.forEach((el, idx) => el.addEventListener("mouseenter", () => moveBubble(idx, xMove, yMove)));

   

   

  }, [])

See the Pen App.js by s (@s) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

I noticed you're not using gsap.context(), but you are using React. I'd strongly recommend reading this article:

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[GreenSock]

I noticed you're using event.movementX and event.movementY - I bet that's your problem. Those numbers are the delta from the previous mouse event. So they'll likely be very small. It kinda sounds like you are trying to use them as screen coordinates. Like @GSAP Helper said, we really need a minimal demo to effectively troubleshoot - if you're trying to animate elements to specific coordinates, a lot depends on how you set things up in the document flow, etc. Like starting with the elements on top of each other in the native flow, position: absolute and then using x/y values to position them may give you the easiest way to work with pointer event coordinates. 

[nkc524]

Hi there! Sorry for the late response.

 

https://codesandbox.io/s/adoring-moore-0ulkk1?file=/src/App.js

I created a codesandbox with the exact issue I am dealing with. My goal is to move the bubbles by how much the mouse moves/in the same direction as the mouse when touching a bubble (hence why I am using event.movementX & event.movementY). 

I think there is some CSS misusage or something that is malfunctioning in my GSAP.to tween, causing x&y to resort to 0 (goes to the top left corner of the tank div). 

Thanks in advance and let me know if you need any more info!

Edit: I found out the issue. I've telling GSAP to move the bubbles to x: event.movementX, y: event.movementY which ended up being a really low number as you stated. What I want is to move it from the current location + event.movements. Is this possible?

[Rodrigo]

Hi,

 

The problem is that all your bubbles are created at the top/left corner of the tank, so the coordinates {x: 0, y: 0} will take a bubble to the top left corner and any value in that vicinity will move the bubble closer to the top/left corner.

 

What you need is to use relative values instead of absolute ones:

const moveBubble = (idx, xMove, yMove) => {
  console.log(xMove, yMove, idx);
  gsap.to(`.bubble-${idx}`, {
    x: "+=" + xMove,
    y: "+=" + yMove,
    duration: 3
  });
};

That seems to work in the way you need. Let us know if you have more questions.

 

Happy Tweening!