Create Tween animation from X and Y coord

[cpkn_dev]

Hi all,

 

Currently I have a draggable ball that generates a "wave" like circle. I am just starting out with Greensock, I was able to figure out how to emit the wave from the point that I'm dragging, but ideally the wave would be relative to the parent container and stay where they are created. I have a function called CreateNewRing() in my js file which I have set to an interval I'd like to create these rings.

 

If anyone has any tips or examples that might help me figure this out I'd be very appreciative!

 

Thanks

See the Pen yLOXBKe by lsencabaugh (@lsencabaugh) on CodePen

[elegantseagulls]

Hi @cpkn_dev

 

There's a few things you'll want to consider for this:

1: If the rings are children of the draggable target, they will move with it, so you'll want to make the rings direct children of the container.

 

2: As you're setting the rings, you'll want to keep track of which are active, or you'll be moving the whole animation to the new location, which I assume is not what you're trying to do (I'm assuming you want each new ping to happen at the new location, kinda a ripple effect), so for that you'll want to check which <span> isn't currently active (probably just by cycling through their index) and set that one/ones at the new location, or append the spans via JS, animating them from the dragged location (which you can get from draggable with less cost than checking bounding box every time), and remove the appended span when the animation finishes.

Hope this helps point you in the right direction.

[cpkn_dev]

@elegantseagulls

 

Thanks for the tips, I've updated my codepen and I think I'm a lot closer, a problem I'm facing now (I think) is when you are dragging something mid drag it doesn't seem to get the right x and y coord. I'm using Draggable.Get(). Is that what you were suggesting previously?

[GreenSock]

I assume this is what you're looking for, right?: 

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

 

Just be careful because box-shadow is very expensive for the browser to render (totally unrelated to GSAP). So you might get sluggish performance. 

 

Happy tweening!

[cpkn_dev]

That's perfect! Thank you. I will look up those functions (onRepeat, onStart),  I did not know they existed

[cpkn_dev]

Hi guys, I'm back again. I'm working on the same animation so I figure'd I'd still use this thread. I'm trying to now make it so the ball will constantly "drag" as I hold in during a mousedown event on the dragable ball. Ideally the ball would keep moving towards the point the mouse is "mousedown" on until the user decides to let go.

 

It works well with the high drag Resistance. I've been trying to use the onDrag event but it doesn't know if I'm still holding on to it or not.

 

Any advice welcomed

 

See the Pen VwazjZx by lsencabaugh (@lsencabaugh) on CodePen

 

 

[ZachSaucier]

Hey Lucas. I recommend that you look into GSAP's .quickSetter() method. There's also a demo that has a mouse follower that you could adapt to do what you're wanting to do. The main difference is that you'd restrict the movement to when the mouse is down (after the circle has been clicked). 

[cpkn_dev]

@ZachSaucier Thanks, that's exactly what I need. I've been playing around and I think I'm 90% there, do or anyone else see anything wrong with my followMouse() function? It doesn't seem to be getting the right x and y position

 

See the Pen VwazjZx by lsencabaugh (@lsencabaugh) on CodePen

 

 

[ZachSaucier]

You shouldn't use Draggable at this point. Just use the quickSetter/ticker stuff. Here's how I'd set it up:

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

[ZachSaucier]

With fixed positioning (I restructured the HTML and CSS to make more sense):

See the Pen xxVXYwK?editors=0100 by GreenSock (@GreenSock) on CodePen

[cpkn_dev]

I was overthinking that, without Draggable that's much simpler. Thanks!