Draggable limit drag area size

[knalle]

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.

[Cassie]

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;
}

 

[knalle]

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

[knalle]

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

[GreenSock]

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. 

[knalle]

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

 

 

[GreenSock]

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. 

[knalle]

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

[Cassie]

Nicely done!