Pixi.js : draggable + inertia

[mvuidev]

Hello Greensock team !

 

I tried to achieve what i want before posting here, but finally need some help...

Basically, I'd like to be able to drag a Pixi container with the Draggable plugin and inertia.

Also note that the container is wider than the canvas, so have to correctly set the bounds.

 

I tried with a proxy but can't figure out how to sync the container position with the proxy one.

 

Any suggestion or example ?

 

Thank you !

[ZachSaucier]

Hey mvuidev and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

Here's an example that uses PIXI with Draggable:

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

 

If you'd like more help implementing things in your actual project please create a minimal CodePen demo (forking the version above to recreate the issue is a good option).

 

[mvuidev]

Hi Zach, thank you for taking the time.

 

I found another example on the forum before seeing your answer, so here is my current result :

See the Pen VweVwXK by mvuidev (@mvuidev) on CodePen.

 

Can you tell me if i'm doing it right ?

 

I have another question :

Draggable is cool, but there is a dragging effect I really would like to get :

See the Pen zYrMxxv by mvuidev (@mvuidev) on CodePen.

 

You see the effect i'm talking about ?

I could use this version to drag the container (with the dragging effect) but can't use the inertia on the bounds...

So if there is a way to achieve that with GSAP, that would be great ?

[ZachSaucier]

Sure, the key is to use the trigger and bounds properties of Draggable:

Draggable.create(document.createElement('div'), {
    trigger: proxy,
    bounds: {
        minX: 0, maxX: -innerWidth
    },
    // ...
})

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

[mvuidev]

Sorry, maybe my explainations was not so good.

Your answer is about the bounds on my first example, but using "bounds: canvas" is the same, no ?

 

That said, on my first example (with Draggable) I would like to have the same drag effect from my second example, a sort of "easing" when the container follows the cursor position.

But I don't know if GSAP allows that.

 

If it does'nt ? do you have an idea how I could allow the bounds animations on the second example ?

At the moment, if I reach the bounds, it just stops.

 

Trying to explain as well as I can !

And thank you

[ZachSaucier]

28 minutes ago, mvuidev said:

Your answer is about the bounds on my first example, but using "bounds: canvas" is the same, no ?

No, the bounds in your demo and my demo are different. The bounds in your demo are restricted to the canvas but the canvas's width is only the viewport so it's more limited. In my demo I use a calculated value of 2 * the viewport's width.

 

29 minutes ago, mvuidev said:

That said, on my first example (with Draggable) I would like to have the same drag effect from my second example, a sort of "easing" when the container follows the cursor position.

But I don't know if GSAP allows that.

Does my demo not exemplify the same behavior? Perhaps I'm missing what, specifically you're talking about. My demo and your second demo look very similar to me but with more forgiving bounds...