mallanaga Posted May 16, 2020 Share Posted May 16, 2020 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. See the Pen xxwyVwg by dudo (@dudo) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 16, 2020 Share Posted May 16, 2020 Hey mallanaga. I'm not seeing the behavior you describe in the pen above. Does that pen recreate the error? Does it only happen on certain devices or browsers? Link to comment Share on other sites More sharing options...
OSUblake Posted May 16, 2020 Share Posted May 16, 2020 It's doing everything you're telling it to do. Perhaps you meant this. gsap.to(card, { x: 0, y: 0, duration: 0.5 }); 3 Link to comment Share on other sites More sharing options...
mallanaga Posted May 16, 2020 Author Share Posted May 16, 2020 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. Link to comment Share on other sites More sharing options...
mallanaga Posted May 16, 2020 Author Share Posted May 16, 2020 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. Link to comment Share on other sites More sharing options...
OSUblake Posted May 16, 2020 Share Posted May 16, 2020 That's a really complicated problem, and I don't have the time to do it for you. Search the forums for FLIP animations. You're going to have to do something similar to that. Link to comment Share on other sites More sharing options...
OSUblake Posted May 16, 2020 Share Posted May 16, 2020 Here's the start of something. It might a jump a little. Probably because of your border. See the Pen 300d0f812b9d0765181761cbe8fe6438 by osublake (@osublake) on CodePen 2 1 Link to comment Share on other sites More sharing options...
mallanaga Posted May 17, 2020 Author Share Posted May 17, 2020 Dude! Thank you. Resetting the position is where my head was going to, but you beat me to it. Also, TIL Quote forEach() : There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behaviour, the . forEach() method is the wrong tool, use a plain loop instead. I owe you a beer... Hit me up if you're ever in San Francisco. 1 Link to comment Share on other sites More sharing options...
mallanaga Posted June 24, 2020 Author Share Posted June 24, 2020 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... Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 24, 2020 Share Posted June 24, 2020 The video looks like it's zeroing out every time at the start. I'm guessing that's because you're creating a new card each time? dropArea.append(target); If you're going to create a new target each time then you need to set its initial position to the position of the previous card. So you'd need to pass in two sets of position values and use .fromTo(). If you can reuse the same (old) target then you could use a relative .to() tween like what you're using. Link to comment Share on other sites More sharing options...
mallanaga Posted June 24, 2020 Author Share Posted June 24, 2020 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); }; Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 24, 2020 Share Posted June 24, 2020 I guess you're talking about jQuery's .append? Regardless, you need to make sure that the inline styles are retained. Why are you appending instead of just changing the old one anyway? For vertical ordering? z-index is better for that. Link to comment Share on other sites More sharing options...
mallanaga Posted June 24, 2020 Author Share Posted June 24, 2020 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). Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 24, 2020 Share Posted June 24, 2020 I'd love to be able to see a minimal demo in a CodeSandbox to try and figure out what's going on. Link to comment Share on other sites More sharing options...
mallanaga Posted June 25, 2020 Author Share Posted June 25, 2020 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! See the Pen yLeXXGY by dudo (@dudo) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 Hey mallanaga. I think it's just some logical errors? I think you only need to subtract out the differences if the parent changes: See the Pen zYrzyEp?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
mallanaga Posted June 25, 2020 Author Share Posted June 25, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 This is closer See the Pen VweWgOK?editors=0010 by GreenSock (@GreenSock) on CodePen Unfortunately from what I can tell this is unrelated to GSAP so I can't keep working on it. If you are finding some bug in GSAP please let us know and we'll be happy to take a look Link to comment Share on other sites More sharing options...
mallanaga Posted June 25, 2020 Author Share Posted June 25, 2020 Your pen has the same issue, unfortunately =( At this point it feels like gsap can't accommodate this type of animation? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 26 minutes ago, mallanaga said: At this point it feels like gsap can't accommodate this type of animation? I doubt it's a matter of GSAP not being able to accommodate. It's likely in regards to not properly calculating the values or something along those lines. Thus far I haven't seen anything to make it seem like it's a bug in GSAP. If you have evidence of that not being true please let us know Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 25, 2020 Share Posted June 25, 2020 28 minutes ago, mallanaga said: Your pen has the same issue, unfortunately =( I'm not seeing that on my device. What device and browser are you on? Link to comment Share on other sites More sharing options...
mallanaga Posted June 25, 2020 Author Share Posted June 25, 2020 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. Link to comment Share on other sites More sharing options...
OSUblake Posted June 25, 2020 Share Posted June 25, 2020 There's obviously some logic/calculation problems in your code because the card doesn't always snap to same position inside the draw box. It should behave like this. See the Pen 94f3c5032960e8b95a527b70cfd22afa by osublake (@osublake) on CodePen The easiest thing to do is to make sure everything is absolutely positioned at 0, 0. Stuff like border width can also throw off getBoundingClientRect. If you need a border, then do it in another layer. 2 Link to comment Share on other sites More sharing options...
mallanaga Posted June 25, 2020 Author Share Posted June 25, 2020 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)`; Link to comment Share on other sites More sharing options...
OSUblake Posted June 26, 2020 Share Posted June 26, 2020 Oh, well the border is still a slight 2px problem. I don't have time to go through all your code right now, but I think you have a problem somewhere. Like why is every scene being looped through, and why is append being called every time? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now