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.

I have a some nested draggables. I have cards, and areas that those cards snap to (kinda). When I move the parent, then try to put the child back in, it moves to a location that seems to be 2x and 2y.

That link helped, thanks! Instead of setting style.transform, I used quickSetter to properly set the x and y position. Works great.

Hello there! I'm not entirely sure this has anything to do with gsap, but I don't know who else to ask. I'm working on an app to play cards, and broadcasting events. I won't bore you with those details. I use Draggable with the onDrag listener, then broadcasting the draggable's style.transform I pick up the changes with this: eventSource.addEventListener("cardPosition", (e) => { const data = JSON.parse(e.data), target = document.getElementById(data.message.id); target.style.transform = data.message.transform; }); This works, but the dom seems to be confused about the position of the element when grabbing it from another client. Attached is a gif showing an example.

Can I set the properties on a Draggable after it's been initialized? I'm passing some objects between quite a few classes, and I have to recreate and then disable certain Draggables. For instance... the zIndexBoost attribute. I typically want it to be true, but occasionally I want it false. Is there a way to set it after calling Draggable.get(node) and enabling it?

Any update on this? And if not, could you give a bit of an example on how to calculate it?

TweenMax.staggerTo('.card', 1, { rotationY: '+=180', repeat: 1, yoyo: true }, 0.1); So, I see how I can stagger with a specific tween, but what if i want to set the same value twice in the animation, before moving onto the next? var tl = new TimelineLite() tl.to('.card', 0.4, { z: 100, rotationY: '+=180', ease: Back.easeOut }) .to('.card', 0.1, { z: 0, ease: Back.easeInOut }) This flips a card, while also lifting it off the table a bit. I want the stagger to do this for each of card. Is there a way to do that?

I came to that conclusion as well! Thank you for your help!

Wow... I wasn't even close! That clears it up and really shows the code shining. Thanks! You just got yourself a club member =) I lied on marking as solved... How would you handle multiple entities? I added a few elements and it's pretty funky. Several end up moving simultaneously.

If I create 2 draggables on an object, only the last one sticks. Any way to have multiple triggers on the same object? The example I have here is a card of sorts. I'd like to be able to: move the card when when clicking in the middle and dragging flip the card when clicking in the middle rotate the card when clicking the corners and dragging flip the card when clicking an edge and dragging into the card Am I declaring the draggables wrong? Is there a different way to use triggers? Thanks!