ThrowPropsPlugin end function

[yafitohana]

Hey,

Been using GSAP for a while now, but I have a problem with the snap feature of ThrowPropsPlugin.

I'm currently working on a project that includes pixi.js and I'm using GSAP to animate.

since I'm using pixi and not regular html elements I decided to use ThrowProps directly and not draggable.

here's a snippet: 

this.tween = ThrowPropsPlugin.to(this, {

throwProps: {

x: {

velocity: 'auto',

min: 0,

max: 1000,

end: function (naturalStop) {

if (distanceFromAnotherPixiObject < 50) {

return anotherPixiObject.x

}

return naturalStop

}

},

y: {

velocity: 'auto',

min: 0,

max: 1000,

end: function (naturalStop) {

if (distanceFromAnotherPixiObject < 50) {

return anotherPixiObject.x

}

return naturalStop

}

}

},

onComplete: () => {

delete this.tween

}

}, 1, 0, 0.4)

that code is executed with the event pointerOut and "this" is the pixi object

the problem I'm having is that in order to calculate the distance between the 2 objects I need to have both x and y in the end function..

the behaviour I'm trying to do is to snap to an object if the dragged object is close enough..

really need your help with this one, been struggling for a while now

thanks in advance

[GreenSock]

I have good news for you: recent versions of ThrowPropsPlugin have a new "linkedProps" property that lets you get this behavior. 

 

Here's a demo with SVG, but you can totally do the same thing with Pixi or anything else... 

See the Pen aqEdGM?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

(Make sure you read the comments in the code)

 

Does that help?

 

Docs: https://greensock.com/docs/Plugins/ThrowPropsPlugin

[yafitohana]

Thank you so much that's exactly what I needed. couldn't find it in the docs. 

You're awesome!!!

[GreenSock]

There's a really good reason you didn't find it in the docs - it wasn't there until yesterday It's one of those "hidden" features that I built in and didn't expose publicly because I wanted to wait to see if many people wanted/needed it. Your question helped me see that it's probably time to add it to the docs and support it officially/publicly. 

 

Enjoy!