Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jesper.landberg

This skew effect when using draggable?

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,

 

In the attached codepen u can see a draggable slider I made from scratch a while ago, that has a skew effect based on acceleration and velocity. I want to archive the same effect using draggable. What approach would be the best to archive something like this using draggable? What events and props should I look at?

 

Would it also be possible to get the easing effect on drag as in my own slider? Using a lerp function to archive this.

 

thanks

See the Pen EEwrRp?editors=1000 by ReGGae (@ReGGae) on CodePen

Link to comment
Share on other sites

Sure, it's totally doable but I don't have time right now to rebuild it all for you from scratch. You could just use an invisible <div> that's on top of the images as a proxy of sorts, and just tween the position of the "real" element(s) to match the proxy. And since you're a Club GreenSock member, you have access to ThrowPropsPlugin which can track (and report) velocity of anything, so you could tap into that inside of an onDrag or something. 

 

https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track()

 

Hopefully that gets you going in the right direction. Let us know if you need anything else. 

 

  • Like 2
Link to comment
Share on other sites

7 hours ago, GreenSock said:

Sure, it's totally doable but I don't have time right now to rebuild it all for you from scratch. You could just use an invisible <div> that's on top of the images as a proxy of sorts, and just tween the position of the "real" element(s) to match the proxy. And since you're a Club GreenSock member, you have access to ThrowPropsPlugin which can track (and report) velocity of anything, so you could tap into that inside of an onDrag or something. 

 

https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.track()

 

Hopefully that gets you going in the right direction. Let us know if you need anything else. 

 

 

Thanks, seems good. I'm starting to notice that even tho I have used GSAP for a couple of years now there is so much good stuff that I haven't check out yet.

 

Anyway: I setup my current code in a PEN.

 

Still not really sure how to do this. Should I make a proxy element outside the current slider element, set that as the draggable element, without throwprops, and then update the actual slider element with values from Throwprops track?

 

See the Pen mGaOzw?editors=0010 by ReGGae (@ReGGae) on CodePen

 

Link to comment
Share on other sites

Here's some pens that you may find useful.

 

These use a proxy element.

 

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

 

 

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

 

 

 

These track velocity. I used the VelocityTracker.track() method because reasons, but it's the same thing as the ThrowPropsPlugin.track() method.

 

 

See the Pen 9b67c34586f62058091ed16829c58ed5 by osublake (@osublake) on CodePen

 

 

 

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

 

 

 

 

 

 

 

  • Like 5
Link to comment
Share on other sites

I love a challenge, so I took a crack at it here: 

 

See the Pen JawEyN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. 

 

It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. 

 

Does that help? 

  • Like 8
Link to comment
Share on other sites

  • 1 month later...
On 9/19/2018 at 5:08 PM, GreenSock said:

I love a challenge, so I took a crack at it here: 

 

See the Pen JawEyN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. 

 

It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. 

 

Does that help? 

 

 

Amazing! 

 

If i want to add a snap on this carousel? how can I do it? 

 

 

Link to comment
Share on other sites

2 hours ago, AllenIVe said:

Amazing! 

 

If i want to add a snap on this carousel? how can I do it? 

 

It depends on exactly how/where you want it to snap, but there's a bunch of information on snapping in the docs: 

https://greensock.com/docs/Utilities/Draggable

 

 

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