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?

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))); }, [])

Hi there! This is exactly what I was looking for. I was unsure of how to use the "random" function, as I am still settling in with using GSAP. I only used the timeline because I thought it was necessary in order to use the invalidate() and reset() functions, but your solution is exactly what I want. Thanks so much for the quick reply and help!

Hi there, I can't seem to get this working. I have a bunch of bubbles that I want to yoyo, and once that yoyo is complete I want it to go towards a new, random direction (both x and y). I want the initial x,y starting values to remain the same, but the bubbles to move towards a new directed for each timeline refresh. Is this possible? Below is everything I have tried PS I would submit a codepen, but the code is complicated since it deals with JSX. I can't seem to get it working on codepen useLayoutEffect(() => { bubArray.forEach(x => { gsap.set((`.bubble-${x}`), { position: 'absolute', x: gsap.utils.random(0, 500), y: gsap.utils.random(0, 500) }) let btl = gsap.timeline() btl.to(`.bubble-${x}`, { y: gsap.utils.random(0, 500), x: gsap.utils.random(0, 500), duration: 3, yoyo: true, repeat: 1, repeatRefresh: true, onComplete: () => {btl.invalidate(); btl.restart(true)} }) })