dylanfisher

Thanks for the replies! @ZachSaucier exactly, I don't want to send a constant stream of updates to the server, so I can't go this approach. I want to be able to re-create the inertia and pass the "throw" momentum to the element in the other client's browsers. I can't quite get @OSUblake approach to work. The bounds don't reflect the initial bounds created from the Draggable instance, and it seems overkill to have to run a custom checkBounds function when the Draggable instance can handle that for you. https://codepen.io/dylanfisher/pen/MWaVKom It would be amazing if I could take the inertia object from the Draggable onDragEnd function and pass the whole thing to gsap.to(). For example: gsap.to(ball, { inertia: inertia });

I'm working on a project that involves a draggable ball. Multiple people can participate in throwing the ball on a website in real time. So far I have this working well. When the ball is dragged, a handleBallChange function fires that updates the ball for all other users. var draggable = Draggable.create($ball, { type: 'x, y', inertia: true, throwProps: true, onDragEnd: function() { var data = { x: this.endX, y: this.endY, duration: this.tween.duration() }; handleBallChange(data); } }); The function that moves the ball for all other users is working well, but this just uses the gsap.to() function, and doesn't get the same nice effect as the initial Draggable object with inertia. var handleBallChange = function(data) { gsap.to($ball, { x: data.x, y: data.y, duration: data.duration }); }; So – my question is if there's a way to pass more of the draggable tween information to the gsap.to() function in order to maintain the same inertia and draggable qualities in the handleBallChange function. In the Codepen example my goal is to have the blue ball move with the same inertia as the red ball.