Draggable with inertia(throwProps) no longer supports ease?

[Sahil]

Hi,

Working with draggable after some long time. I wanted to use an ease on draggable in some situations but seems like it's no longer supported. I think  because of inertia plugin doesn't have to method?

 

Quote

Anything that directly references ThrowPropsPlugin (it's renamed InertiaPlugin and it doesn't have a .to() method attached to it

 

Though I was curious if it's still possible to add support for easing? I have attached old and new reduced test case.

 

Please let me know.

 

Thanks,

Sahil

 

gsap 2.x

See the Pen ZEaqxMz?editors=0010 by Sahil89 (@Sahil89) on CodePen

See the Pen BamqrPP?editors=0110 by Sahil89 (@Sahil89) on CodePen

[GreenSock]

Easing was normalized to "power3.out" in InertiaPlugin because:

1. I don't recall even one person ever wanting to alter the ease
2. It'd only make any sense to use an ".out" kind of ease, so it felt odd to offer the ability to define an ease but then turn around and restrict users to only certain ones ("*.out")
3. It expanded the surface area of the API without much payoff. 
4. When you use other eases, it could lead to animations that feel a little odd. For example, "elastic" was super drastic. For any of the eases, it had to plot the momentum according to the curve of the ease at the very beginning, thus if it was super steep or not steep at all, things could look strange. Like in your old demo, I think that movement looks quite strange/unnatural. 

I'm curious if you see a practical use case where someone would really need to leverage a different ease. What prompted your request today? 

[Sahil]

In past I used to use "power4.out", which is not big difference to "power3.out". Though I wanted option for other eases now because I am working on a carousel project with ability for customization and ability for different eases was one of the option was requirement.

 

Also, I am using drag direction as input to change slide. If I throw and snap, then snap looks as you would normally expect but if I snap to next slide using little drag, then next slide snaps without "back" ease kind of effect so I also wanted to address this using ease option.

I think I could still achieve it by using extra tweens but I wanted to keep all logic in one place. Anyway, I think it won't be possible as inertia plugin doesn't support to method. I will later check if I can intercept and mimic effect I want. Thanks

[GreenSock]

5 minutes ago, Sahil said:

In past I used to use "power4.out", which is not big difference to "power3.out". Though I wanted option for other eases now because I am working on a carousel project with ability for customization and ability for different eases was one of the option was requirement.

 

Yeah, I don't think anyone would be able to actually notice a difference in a real-world project. And again, if you use other more extreme eases like elastic, back, etc. it just ends up looking rather unnatural. The point of InertiaPlugin is to make things glide to a stop in a way that looks natural. 

 

7 minutes ago, Sahil said:

Also, I am using drag direction as input to change slide. If I throw and snap, then snap looks as you would normally expect but if I snap to next slide using little drag, then next slide snaps without "back" ease kind of effect so I also wanted to address this using ease option.

Yeah, that "back" part only happens when there's adequate momentum that would normally push the landing place much further than where you're asking it to end, so it naturally glides back. If you don't give it much momentum, it really doesn't make much sense to make it shoot past and come back (well, unless you're okay with it looking unnatural). You could reduce the "resistance" quite a bit to see if you can get the look you want in that scenario. Otherwise, yes, you could mimic things with normal tweens if you really need that "back" motion. 

 

Good luck Sahil! 👍