cpkn_dev Posted August 28, 2020 Share Posted August 28, 2020 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 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 28, 2020 Share Posted August 28, 2020 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. 2 Link to comment Share on other sites More sharing options...
cpkn_dev Posted August 28, 2020 Author Share Posted August 28, 2020 @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? Link to comment Share on other sites More sharing options...
GreenSock Posted August 28, 2020 Share Posted August 28, 2020 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! 4 Link to comment Share on other sites More sharing options...
cpkn_dev Posted August 31, 2020 Author Share Posted August 31, 2020 That's perfect! Thank you. I will look up those functions (onRepeat, onStart), I did not know they existed 1 Link to comment Share on other sites More sharing options...
cpkn_dev Posted September 2, 2020 Author Share Posted September 2, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 2, 2020 Share Posted September 2, 2020 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). 1 Link to comment Share on other sites More sharing options...
cpkn_dev Posted September 2, 2020 Author Share Posted September 2, 2020 @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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 2, 2020 Share Posted September 2, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 2, 2020 Share Posted September 2, 2020 With fixed positioning (I restructured the HTML and CSS to make more sense): See the Pen xxVXYwK?editors=0100 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
cpkn_dev Posted September 2, 2020 Author Share Posted September 2, 2020 I was overthinking that, without Draggable that's much simpler. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now