Jump to content
Search Community

ThrowPropsPlugin end function

yafitohana test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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.
×
×
  • Create New...