Jump to content
Search Community

edgeResistance for Draggable + ThrowProps

usheeen 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

When I throw a Draggable element, it can go outside the defined bounds regardless of edgeResistance. 

 

It would be great if ThrowProps respected edgeResistance or better still had it's own setting, eg. throwEdgeResistance or edgeResistanceOnThrow

 

Alternatively, allow us to set a maximum value for the number of pixels which the Draggable can exceed bounds on throw.

 

I've also noticed a slight bug / quirk related to this. If the element hits the bounds while dragging, it will obviously stop, but if there is sufficient velocity on release it will briefly jump outside the bounds.

 

(Sorry for the low frame rate, Quicktime screen recording isn't the best...)

See the Pen ByvGob by oisinlavery (@oisinlavery) on CodePen

Link to comment
Share on other sites

OSUblake is a master at finding undocumented gems ;)

 

Sometimes we purposely don't document a few features to see if they actually end up being useful in real-world situations before we commit to them. We'll wait to hear if people request such features and then we can pleasantly surprise them with an answer like "Good news: it's already baked in..." If nobody ends up needing/wanting those features, it's much easier for us to gut them. Plus sometimes I worry about overwhelming people with so many optional parameters. 

 

But yeah, overshootTolerance is a nice little gem that's baked into ThrowPropsPlugin. 

 

Also, in your demo, I got a better "feel" when I set the minDuration to 0.1 (the default is 0.5). That's the minimum duration of the tween that gets created by the "flick". 

  • Like 2
Link to comment
Share on other sites

OSUblake, any other gems?

 

Oh yeah! I have been discovering a bunch of stuff while working on a new set of TypeScript definitions. But like Jack said, I don't know if they're meant to permanent.

 

Lately, I've just been creating new types of Draggable when dealing with any limitations or want to add some custom behavior. Using ES6 classes makes this real easy, and you don't have to mess around with changing the source code in most cases.

class CustomDraggable extends Draggable {
  constructor(target, vars) {
    super(target, vars);

    // Customize your draggable...
  }
}

So here's a demo of how you can extend the Draggable class to create a repsonsive draggable. When onThrowComplete is called, it positions the target relative using x/yPercent, which is just whatever the top or left percent is times -1.

 

See the Pen azMONr by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 2 years later...
8 hours ago, sumimasenga said:

Vote for overshootTolerance in the docs. Needed it today for work :)

 

It's in the docs, but kind of hidden because it's collapsed inside the throwProps description.

 

It might be clearer to have all the throwProps options in a separate section. I also think it would help to have all the properties listed alphabetically.

  • Like 1
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...