Jump to content
GreenSock

knalle

Draggable limit drag area size

Go to solution Solved by Cassie,

Recommended Posts

Can I limit the drag area and still have the the same animation (no hidden overflow)? So the drag trigger is not taking the full width og the container.

 

 

Could I just create a trigger (div) that I set the style the width/height and placement of.

 

(fixed now :) )

See the Pen QWmdXQg by knalle (@knalle) on CodePen

Link to comment
Share on other sites

  • Solution

If I understand correctly - if you set pointer-events none on the cards I think you'll get the behaviour you want?
 

.stack-inner figure {
  pointer-events: none;
}

 

  • Thanks 1
Link to comment
Share on other sites

Ah, of course 😅 Simple solution, that does the trick! Thanks.

  • Like 1
Link to comment
Share on other sites

How would you add a rotation on drag. Like a swinging intertia on the images? That stops when you stop stop/pause the dragging motion. I have tried with quickTo combined with IneriaPlugin tracker, but I can't get et working :(

Link to comment
Share on other sites

15 minutes ago, knalle said:

How would you add a rotation on drag. Like a swinging intertia on the images? That stops when you stop stop/pause the dragging motion. I have tried with quickTo combined with IneriaPlugin tracker, but I can't get et working :(

Do you mean like a physics effect where you drag right and it rotates clockwise and then swings back again when you stop with an elastic motion? If so, that's an entirely different challenge that you'd need to write custom physics code to handle. You can fake it to some degree with elastic, but it isn't as if there's a "rotateWithFullPhysics: true" option you can set. 

  • Like 1
Link to comment
Share on other sites

Excactly what I mean. I wasn't expecting an out-of-the-box option. I looked into this, but my skills didn't get my anywhere :D

 

 

Link to comment
Share on other sites

Yep, it's entirely doable, but it takes some custom physics and geometry logic. Definitely beyond the scope of help we can provide for free in these forums. You're welcome to post in the "Jobs & Freelance" forum or contact us directly for paid consulting services. 

  • Thanks 1
Link to comment
Share on other sites

See the Pen mdxWBLz by knalle (@knalle) on CodePen

 

Yay, made it work :) It is based on a couple of ScrollTrigger skew examples. I used a proxy for tweening the rotation based on InertiaPlugin tracking on the draggable. And changed quickSetter to quickTo. I think the performance is good and the "physics" effect is fine - but if anybody spots optimization opportunities  in the code, please reply :)

  • Like 1
Link to comment
Share on other sites

Nicely done!

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