Controlling Draggable Programmatically

[dylanfisher]

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.

See the Pen dyYmPgL by dylanfisher (@dylanfisher) on CodePen

[ZachSaucier]

Hey Dylan and welcome to the GreenSock forums! Thanks for supporting GreenSock with a Club membership. We couldn't do what we do without people like you!

 

Normally if you want things to be synced I'd suggest to use GSAP's ticker and .getProperty() to keep them in sync:

See the Pen bGVvdpR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could do the same approach using the draggable's onDrag & onThrowUpdate callbacks instead of a ticker if you want. It actually has even less delay because it's not waiting for the next RAF to run:

See the Pen eYpMNBP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In your situation, whether or not you can do this approach depends on your connection speed. If you're able to have very quick updates you could. 

 

If you don't have fast enough updates, then you might need a way to recreate the throw and inertia stuff on the client side. That's more complicated I believe. How about you try out the approach above in your project and let me know how it turns out  

[OSUblake]

Your tween isn't the same as the one done by draggable. You would need to use the inertia plugin to recreate the same tween.

 

See the Pen d10b869cab0bc8e4e6c28c81e837c650 by osublake (@osublake) on CodePen

 

 

@GreenSock @ZachSaucier The docs for the inertia plugin don't have any demos that use the plugin directly. Might be good to add some.

 

See the Pen 7c4eae8dd686a125d631da761b164f2d by osublake (@osublake) on CodePen

 

 

 

 

[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.

 

See the Pen MWaVKom by dylanfisher (@dylanfisher) on CodePen

 

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
});

 

 

[ZachSaucier]

10 minutes ago, dylanfisher said:

I can't quite get @OSUblake approach to work.

What are you having trouble with in regards to getting his approach working? 

[OSUblake]

1 hour ago, dylanfisher said:

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
});

 

That's literally what I'm doing.

 

And vx/vy are not coordinates. The v stands for velocity.

 

 

[OSUblake]

1 hour ago, dylanfisher said:

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.

 

And you would need to use a fixed size for the container. You can't have people using different sized containers.

 

 

[ZachSaucier]

On 5/7/2020 at 3:14 PM, OSUblake said:

The docs for the inertia plugin don't have any demos that use the plugin directly. Might be good to add some.

Added your demo to the .track() docs and the main InertiaPlugin page.