Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mvuidev

Pixi.js : draggable + inertia

Recommended Posts

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 !

Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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 🙂

Link to post
Share on other sites

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

Link to post
Share on other sites

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 :)

Link to post
Share on other sites
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...

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×