Jump to content
GreenSock

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

ThrowPropsPlugin end function

Recommended Posts

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

Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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

You're awesome!!!

  • Like 1
Link to post
Share on other sites

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!

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.

×