Shaman Posted February 28, 2021 Share Posted February 28, 2021 Hi, In the following Codepen I try to 'push' the image elements into the direction the mouse (draggable can) came from. Actually I was wondering if there is a method to use the directions result from 'getDirection' ('right', 'up', etc. ) to use in my demo. Else it would take 8 "IF's" to determine the direction the image should move to. Is that right? E.G.: animation.to(shaker, { x: "+=50", duration: 0.4 }); would need to pass 8 tests to tell the animation where to move? I'm not sure if this is well explained. English's not my mother langage, sorry. Kind regards, C. See the Pen KKNoRzP by Shaman1975 (@Shaman1975) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 1, 2021 Share Posted March 1, 2021 Hey Shaman. I think it'd help if you focused on describing your end goal more clearly instead of focusing on the question that you have right now. What's the end effect that you want to create? Link to comment Share on other sites More sharing options...
Shaman Posted March 1, 2021 Author Share Posted March 1, 2021 Hi Zach. Thank you for looking into this matter and your time. My end goal is that the images should move away from the draggable and come back after a short time. That's already working but only in one direction... So if I push them from the right they should move a bit to left and come back and vice versa. And that for every direction. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 1, 2021 Share Posted March 1, 2021 I would use a vastly different approach: instead of using hit detection, trying to judge the direction, and so forth, I would calculate the distance in the x and y directions from the dragged object to the center of each item. If the diagonal distance to the center is within a certain maximum, you animate the item away in the opposite direction, optionally in proportion to the distance. That way you don't have have a bunch of different cases, it all just reacts based on the same singular condition. Link to comment Share on other sites More sharing options...
Shaman Posted March 1, 2021 Author Share Posted March 1, 2021 OMG Zach, I don't understand what you are saying. I'm really sorry. So I try in my words: Getting X & Y from draggable to each image - ok Quote If the diagonal distance to the center is within a certain maximum Not sure if I understand how to test this. -> Maybe I really could use your help here Animate the item in the opposite direction (In proportion to the distance) - somewhat ok but I think I can do it Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 1, 2021 Share Posted March 1, 2021 30 minutes ago, ZachSaucier said: If the diagonal distance to the center is within a certain maximum By this I mean the following: If the mouse y is -100px from the center of the target and the mouse x is 50px from the center of the target, then the distance from the mouse position to the center of the target is sqrt(x^2 + y^2) - the hypotenuse of the triangle formed by the two offsets. If that distance is less than some maximum that you set, then you animate it. 2 Link to comment Share on other sites More sharing options...
Shaman Posted March 2, 2021 Author Share Posted March 2, 2021 Hi again Zach, I forked the pen and got this far but I think I still don't get it 🤫 EDIT: Actually my question is now how to use the result to move the image in the same direction? Could you please have a look (again)? See the Pen OJbvYPJ by Shaman1975 (@Shaman1975) on CodePen Thank you Link to comment Share on other sites More sharing options...
mikel Posted March 2, 2021 Share Posted March 2, 2021 Hey Zach, I looked at the version direction-aware-hover-effects. It works for the TEST square. But OSCAR is 'irritated when he is touched from the right or from below'. I do not find the logical mistake. See the Pen vYyjezB by mikeK (@mikeK) on CodePen Happy touching ... Mikel Link to comment Share on other sites More sharing options...
Shaman Posted March 2, 2021 Author Share Posted March 2, 2021 Hi Mikel, Try this : <text class="touch" x="20" y="75">from TOP</text> <text class="touch" x="20" y="75">from RIGHT</text> <text class="touch" x="20" y="75">from BOTTOM</text> <text class="touch" x="20" y="75">from LEFT</text> See the Pen oNYdMjv by Shaman1975 (@Shaman1975) on CodePen 3 Link to comment Share on other sites More sharing options...
mikel Posted March 2, 2021 Share Posted March 2, 2021 Hey @Shaman, Wow. I haven't seen any more land. And it's so simple. Thank you for enlightening me. Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 2, 2021 Share Posted March 2, 2021 6 hours ago, Shaman said: how to use the result to move the image in the same direction? Something along the lines of this: See the Pen Jjbvaxr?editors=0010 by GreenSock (@GreenSock) on CodePen Obviously will need some serious tweaking but hopefully it conveys the gist. Also, you should avoid getting the image offsets each time. The only time you should need to get those again is at the start or if the viewport changes size. Save them to a variable and use that reference to avoid having to compute them every time. That's a good rule of thumb in general. You want to avoid doing work, especially if you need to do it every time something updates, if you can. 1 Link to comment Share on other sites More sharing options...
Shaman Posted March 2, 2021 Author Share Posted March 2, 2021 Thank you @ZachSaucier & @mikel, I tweeked your idea a bit and for the "x"-animation, i'm quite happy. Also I tried to fix the: Quote you should avoid getting the image offsets each time Hope that's ok now? But "y" is a not ok yet: Actually, I think I need another formula for the "y"... (Similar to "x"). Another thing I would like to achieve: How would I reverse the animation after each move? See the Pen mdOLXbv by Shaman1975 (@Shaman1975) on CodePen Thank you again for your time and your help. Link to comment Share on other sites More sharing options...
mikel Posted March 3, 2021 Share Posted March 3, 2021 Hey @Shaman, Coded a little more concentrated - an option here. See the Pen yLVjqox by mikeK (@mikeK) on CodePen How the processes, the dependencies of your animations should look exactly, is not so clear to me. Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2021 Share Posted March 3, 2021 We don't really have the capacity to help with every step along the way. These forums are for GSAP-specific questions. There are a lot of ways to reverse the animation depending on the behavior that you're wanting. If you end up with an approach similar to the one that I suggested then the normal way to put it back to the idle state is to do an animation to get there if the distance is out of your maximum distance and there isn't already an animation going back to the idle state. Link to comment Share on other sites More sharing options...
Shaman Posted March 4, 2021 Author Share Posted March 4, 2021 Hi again, It's done with a minimal bug : See the Pen PobaZXx by Shaman1975 (@Shaman1975) on CodePen Sometimes the pictures jump back to the initial position instead of tweening and I don't find out why... I used your method @ZachSaucier and I'm happy with it if it wasn't for the bug. Any idea? Thank you so much for your time and effort @mikel but in your version something isn't working right. If you quickly hover over Oscar, he will not go back to his initial position but that's what I need. Whatever the user does and for how long, after a short time the image should move back to it's initial position. Kind regards, C. Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 4, 2021 Solution Share Posted March 4, 2021 You should be overwriting the appropriate tweens. See the Pen OJbwMZE?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Shaman Posted March 4, 2021 Author Share Posted March 4, 2021 @ZachSaucier You are the Master! Thank you so much. Have a great day. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 4, 2021 Share Posted March 4, 2021 For more info see the post about conflict: 2 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