How to apply InertiaPlugin to the tween?

[RBLN7]

Hey guys, have a question for you...

I'm building the infinite seamless draggable grid with pixi.js and everything is pretty much finished, just i am trying now to add a cherry on the top with the InertiaPlugin.

Please can you help me a bit with the implementation since it was not clear to me on the first look at your docs.
Btw, I have bought the plugin and it's successfully registered..

 

The function bellow is being called every time when pos value is changed.  Can you let me know how can i adjust it to achieve the sweet inertia? 

 

this.dragTween && this.dragTween.pause()
this.dragTween = gsap.to(this.movingContainer.position, 1, {
   x: pos.x,
   y: pos.y,
   ease: 'Power4.easeOut',
   onUpdate: () => {
     // lot of calculations irrelevant for this question
  }       
})

 

Thank you very much for the help!

[GreenSock]

Hm, it's a little tough without seeing the context or any reduced test case (codepen), but here's a rough crack at it: 

 

// first start tracking the velocity of the values so that InertiaPlugin can grab them anytime: 
InertiaPlugin.track(this.movingContainer.position, "x,y");

//then later...
this.dragTween = gsap.to(this.movingContainer.position, {
   inertia: {
     x: {velocity: "auto", end: pos.x},
     y: {velocity: "auto", end: pos.y}
   },
   onUpdate: () => {
     // your calculations or whatever
   }       
});

Does that help at all? 

[RBLN7]

It works but really buggy, especially with the small movements.

I will make a working codepen in the following days and will ask for further help then if i don't figure it out by myself by then...

Anyway thanks for the super quick answer! 🙏

[GreenSock]

Hm, try making sure you set overwrite: true or overwrite: "auto" on your tween so that it kills any competing tweens. If you're still having trouble, please post a reduced test case in codepen and we'd be happy to help. 

[ZachSaucier]

Here's a basic example (modified from one of Blake's old ones) of using the IntertiaPlugin and Pixi:

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

[RBLN7]

Thanks guys, think i have an idea what to do now!

I think my mistake was that i tried to apply it to the tween called inside onDragMove, while I should only apply it to another tween which should be called onDragEnd. Will give it a try tomorrow morning...  Thanks for your help again!