How to calibrate Draggable Item and cursor when scaling width and height onDrag?

[nss5161]

Hi There,

 

I am having trouble getting the transform origins to line up. I know the issue involves the items having a relative position and I have already tried adjusting the transform origin based on the values of drag, but had no such luck. Still new to GSAP and would love some guidance.

 

If I didn't describe the issue well enough, just ask questions. I'll answer ASAP.

 

Thanks,

 

Nick

See the Pen PoWRzYx?editors=0010 by nss5161 (@nss5161) on CodePen

[GreenSock]

Hey Nick. I don't quite understand your question. Can you please be more specific? Are you saying you want it centered on the mouse/pointer? 

 

This definitely sounds like more of a logic thing and general consulting, not so much of a GSAP-specific question, right? We love helping with GSAP-specific questions, but unfortunately we don't have the resources to provide free general consulting services for logic issues, etc. We'll do our best, but I want to make sure I'm managing expectations appropriately. Anyone is welcome to chime in, of course. 

[nss5161]

Hi, thanks for the quick response. It could be a logic based solution, I guess. My question has to do with GSAP Draggable. When I drag an item that is deemed "draggable" by a given class, then I modify the size of the item (using GSAP timelines), the item slips away from my drag (transform and cursor are not aligned show in Codepen above). I was wondering if there was a quick fix for this that I was missing, or if this was a common issue with Draggable and Animations? Hope that clears my original question up. If not, I'll try my best to clear it further.

 

Thanks!

[GreenSock]

5 hours ago, nss5161 said:

I was wondering if there was a quick fix for this that I was missing, or if this was a common issue with Draggable and Animations?

It's not an issue with Draggable. You're altering the width/height properties which aren't related to dragging functionality. Draggable is doing its job correctly, moving the element by exactly the amount that the pointer is moving. But when you alter the width/height it of course shrinks toward the element's upper left corner because that's just how browsers handle layout. If you used scaleX/scaleY, you could set the transformOrigin to where the pointer is, but it looks like you've got rounded corners so I assume you want to prevent those from being scaled disproportionally, thus scaleX/scaleY aren't an option. 

 

You'd have to work out the logic to animate the top/left properties to compensate for what you're doing to the width/height, in proportion to where the pointer is. It's all very doable but it's not simple. Unfortunately that's beyond the free help we can offer in these forums, but you could hire someone in the Jobs & Freelance forum or contact us to book paid consulting time from us. 

 

Good luck with the project. 

[GreenSock]

I couldn't resist digging in a little  ...

 

A few pointers first:

1. You don't need to set delay: 0 anywhere - that's the default.
2. You don't need to pause things initially and then play them later on the same "tick". They'll play automatically. 
3. You're using the old syntax. Put the duration inside the vars object. 
4. It's totally wasteful to use an onDrag() that keeps checking to see if the element has been dragged a certain amount and then firing your animation. That was firing literally on every drag, so you were creating a ton of overlapping tweens. Just use Draggable's minimumMovement property. 
5. You don't need to create a timeline every time you just want to do one .to() tween. Just use gsap.to(). 
6. throwProps: true is now inertia: true, and it requires InertiaPlugin. 

I didn't look over all your code - I'm sure there are other improvements that could be made, but here's an example that does the top/left trick I mentioned and uses MotionPathPlugin's convertCoordinates() method: 

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

 

I hope that at least nudges you in the right direction. 

[nss5161]

Wowsa! That's lookin' good! Thank you for the tips. This is exactly what I needed to get moving.

 

Thanks again!