mallanaga

Blake! Your command of javascript is incredible. I can't thank you enough. That works a treat, and I was able to massage it into place within my app. Great example using window.dispatchEvent to more closely match my use case! Can you confirm the expected behavior or gsap.getProperty, though? It behaves as expected when the Area starts at 0,0, and I drag it around. If I position the element manually, though, it goes back to jumping. It looks like it's grabbing the offset that the element has moved, and not necessarily the element's absolute position within another element. Seems like I'll want to use getBoundingClientRect here, unless there's another gsap convenience method available? Again... you're a life saver. This one problem stalled the development on my project for weeks. I owe you!

const move = ({ target, dropArea, position }) => { // First - record start position let first = { x: 0, y: 0 }; let rect = target.getBoundingClientRect(); first.x = rect.left; first.y = rect.top; // State change, render new DOM dropArea.append(target); // Last - record new position let last = { x: 0, y: 0 }; rect = target.getBoundingClientRect(); last.x = rect.left; last.y = rect.top; // Invert - animate from first position let x, y, rotation; if(dropArea.id !== 'table') { x = `random(-10, 10, 1)`; y = `random(-10, 10, 1)`; rotation = `random(-20, 20, 1)_short`; } else { x = position.x + first.x - last.x; y = position.y + first.y - last.y ; rotation = `${position.r}_short`; } gsap.to(target, {x, y, duration: 0.3}); gsap.to(target.querySelector('.Card'), {rotation, duration: 0.3}); }; So that's pretty clean, and I was able to move more of the code into that last function. This is great. No need to send oldParent now. Nice. So, this still jumps, unfortunately - BUT - I feel like I'm honing in on the culprit. I move the "Draw" area to the middle of the table on page load. The "jump" seems to be relative to the position of the Draw area on the table. When I don't move the Draw area, and keep it at 0,0, the animation looks perfect. As soon as I move it, it jumps again. Is there a proper way to move that element? I'm using an inline style, that's calculated on the fly. I'm not positive, but this feels like it might be part of the issue. I tried calling .update() on the Draw area when it was in the middle, and it actually moved to 0,0.

Thanks for the knowledge, Blake! That's super helpful. I'm not an animator, lol, but I'm slowly becoming one. Regarding the update. The clients won't have the benefit of an onPress event. Won't they need a "manual" call to update? or would the tween be sufficient?

The example is contrived... trying to imitate a pub/sub system where there are several clients all receiving instructions to move a card to a new position, and potentially append that card to a new parent. I think the loop captured that appropriately. This is the real code. Event Listener receives the event: // subscription.js eventSource.addEventListener("positionCard", (e) => { const message = JSON.parse(e.data); const target = document.getElementById(message.id); const oldParent = document.getElementById(message.oldParentId); const dropArea = document.getElementById(message.dropAreaId); const a = dropArea.getBoundingClientRect(); const b = oldParent.getBoundingClientRect(); cardAnimations.move({ target, dropArea, position: { x: parseFloat(message.x) + (b.left - a.left), y: parseFloat(message.y) + (b.top - a.top), r: parseFloat(message.r) } }); }); // cardAnimations.js const move = ({ target, dropArea, position }) => { dropArea.append(target); let x, y, rotation; if(dropArea.id !== 'table') { x = `random(-10, 10, 1)`; y = `random(-10, 10, 1)`; rotation = `random(-20, 20, 1)_short`; } else { x = position.x || 0; y = position.y || 0; rotation = `${(position.r || 0)}_short`; } gsap.to(target, {x, y, duration: 0.3}); gsap.to(target.querySelector('.Card'), {rotation, duration: 0.3}); Draggable.get(target).update(true, true); }; I'll keep poking at it. Sorry to bother. And thanks for the tip about the border! I'll see if I can pull that up.

Hi Blake! I have some randomness to make it look "messy". These are cards, after all ? x = `random(-10, 10, 1)`; y = `random(-10, 10, 1)`;

Ohhhhh, maybe we're onto something. Move the parent "Draw" area to the right a bit on both tables. Seems like there is some sort of memory or the area's original location?? I'm on the latest version of Chrome.

Your pen has the same issue, unfortunately =( At this point it feels like gsap can't accommodate this type of animation?

Unfortunately, you commented out dropArea.append(target) - still jumpy with that. My heart skipped a beat at first, I was so excited! lol. Also, if you want to play with this IRL, here it is in all it's (un)glory. Still a few bugs I'm working on, obviously. http://test.cardbinder.com/play/playing-cards/rooms/asdf

Zach! This did not take me the past 8 hours... but it did take a hot minute, lol. Unfortunately I wasn't able to uncover any issues on my own while putting together the contrived example. Thanks for taking a look! https://codepen.io/dudo/pen/yLeXXGY

No jQuery here, just JS within React. The inline styles seem to be retained. It's quick, but chrome shows the numbers "scrolling", so to speak, and I don't see them resetting to zero. The nesting has to do with dragging. The "draw" area in the video is draggable, and I need all the cards within it to move with it (without firing a drag event for all the cards within it).

Hey Zach! Does append create a new target? Or is the reference lost, rather? I thought append specifically didn't create a new object, but actually moved it within the tree? Tried this, which seems to do what you're suggesting, but the behavior is the same. const move = ({ target, dropArea, position }) => { const draggable = Draggable.get(target); const oldX = draggable.x; const oldY = draggable.y; dropArea.append(target); let x, y, rotation; if(dropArea.id !== 'table') { x = `random(-10, 10, 1)`; y = `random(-10, 10, 1)`; rotation = `random(-20, 20, 1)_short`; } else { x = position.x || 0; y = position.y || 0; rotation = `${(position.r || 0)}_short`; } gsap.fromTo(target, {x: oldX, y: oldY}, {x, y, duration: 0.3}); gsap.to(target.querySelector('.Card'), {rotation, duration: 0.3}); draggable.update(true, true); };

So... I haven't actually seen this working yet, and I've spent more hours than I'd like to admit working on it. The client that's doing the moving seems to be working fine, but it's the other clients that I can't seem to stop from blipping. I can't post a snippet, since the pub/sub nature won't be reflected, but here's the code. Starts on the draggable callback: onDragEnd: function() { let dropArea = document.getElementById('table'); const areas = document.querySelectorAll('.Area'); for (let i = 0; i < areas.length; i++) { if (this.hitTest(areas[i], "51%")) { dropArea = areas[i]; if (dropArea.dataset.role === 'player') { cardEvents.conceal({target: cardRef, roomCode: props.roomCode}); cardEvents.reveal({target: cardRef, playerUuid: dropArea.id, roomCode: props.roomCode}); } break; } }; cardEvents.sendPosition({ draggable: this, oldParent: cardRef.parentElement, dropArea: dropArea, roomCode: props.roomCode }); }, const sendPosition = ({ draggable, oldParent, dropArea, roomCode }) => { const data = { event: "positionCard", id: draggable.target.id, oldParentId: oldParent.id, dropAreaId: dropArea.id, x: draggable.x, y: draggable.y, r: Draggable.get(draggable.target.querySelector(".Card")).rotation, }; api.publish({ data, roomCode }); }; This is now sent to the server, and broadcasted to the clients (including the client doing the action!) eventSource.addEventListener("positionCard", (e) => { const message = JSON.parse(e.data); const target = document.getElementById(message.id); const oldParent = document.getElementById(message.oldParentId); const dropArea = document.getElementById(message.dropAreaId); const a = dropArea.getBoundingClientRect(); const b = oldParent.getBoundingClientRect(); cardAnimations.move({ target, dropArea, position: { x: parseFloat(message.x) + (b.left - a.left), y: parseFloat(message.y) + (b.top - a.top), r: parseFloat(message.r) } }); }); const move = ({ target, dropArea, position }) => { dropArea.append(target); Draggable.get(target).update(true, true); let x, y, rotation; if(dropArea.id !== 'table') { x = `random(-10, 10, 1)`; y = `random(-10, 10, 1)`; rotation = `random(-20, 20, 1)_short`; } else { x = position.x || 0; y = position.y || 0; rotation = `${(position.r || 0)}_short`; } gsap.to(target, {x, y, duration: 0.3}); gsap.to(target.querySelector('.Card'), {rotation, duration: 0.3}); }; Sorry if that seems like a lot... I feel like this has something to do with the fact that when I'm moving the card, its position is being updated locally (obviously). For the other clients, it feels like they should be moved to the coordinates on the table before being appended? I've tried moving Draggable.get(target).update(true, true) above the append, and below the gsap.to call. No change in behavior. I'm sorry to keep bugging you folks. This feels so close...

Dude! Thank you. Resetting the position is where my head was going to, but you beat me to it. Also, TIL I owe you a beer... Hit me up if you're ever in San Francisco.

btw, you guys are amazing, but you already know that. I refreshed the pen to zeros, and modified it slightly to more closely resemble my project's code. The zeros seem to be exposing something else. When I drop the card into the area, I'm prepending it to the area, so that it's a proper child, or if it's not in an area, I prepend the element to the "table". This makes the card jump around quite a bit. I tried update() on the card element, but that didn't seem to do anything.

I guess I should have been more descriptive, apologies, it was late. move the draw area - the child element moves with it (at intentioned) grab just the card, and move it outside of the draw area, and let go. All good still. grab the card again and put it inside the draw area. notice the card position itself what seems to be 2 times what the x and y positions of the .area element are. OHHHHHH. 0,0 is the correct position because it's nested. by setting x and y of the parent it is moving it twice in both directions.