Jump to content
Search Community

Draggable get throwProps in one go instead of separated calling functions

sumimasenga 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

Hi!

 

Have a slightly problem to deal with regarding the plugin Draggable and throwprops ON.

 

I have some images that I can throw and want the image im throwing should stick to the most accurate position of another image based on x and y positions.

 

Is there a way that I can run the snap function for getting the x, y properties as a singel function of the throwing object instead of calling x and y properties separated?

So I can match the throwing object to all the images x & y positions in one function instead of calling it twice.

 

Want to do something like this:
 

Draggable.create('.image',
{
  bounds:'.container',
  type:'x, y',
  edgeResistance:0.65,
  throwProps:true,
  snap:function(x, y)
  {
    var pos = get_closest_image_pos(); // returns array [x:Number, y:Number]
    return pos;
  }
});

Instead of this:

Draggable.create('.image',
{
  bounds:'.container',
  type:'x, y',
  edgeResistance:0.65,
  throwProps:true,
  snap:
  {
    x: function(endValue) {
      return get_closest_image_pos_x(endValue);
  },
  
    y: function(endValue) {
      return get_closest_image_pos_y(endValue);
  }
});

Or is there another way?

 

 

Many thanks for the Greensock library! Pure GOLD!!

 

 

Link to comment
Share on other sites

Hi,

 

Actually you're pretty close to what you need. Turns out that by default the snap function returns the end value for both, x and y, if you include this code you'll see it:

Draggable.create('.image',
{
  bounds:'.container',
  type:'x, y',
  edgeResistance:0.65,
  throwProps:true,
  snap:function(endValue)
  {
    console.log(endValue)
  }
});

It'll return the value of x first and then the value of y, like this:

x value
y value

The only downside is that this doesn't returns an object or array, meaning that both values aren't passed at the same time, so you'll have to create an extra conditional logic to pass the first value to a function that uses the x value and the second value to a function that uses the y value. At that point I believe is better keep each snap function :mrgreen:, don't you think?.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Hi,

 

Draggable has a hit test method, you can set it up to do collision detection that also works with the Tween generated by the ThrowProps Plugin. Take a look at the docs:

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html#hitTest()

 

Unfortunately I don't have time to create a sample but the method is very straight forward so you won't have a big issue getting it done.

 

Rodrigo.

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