Jump to content
GreenSock

Shaman

hitTest & getDirection combination on draggable item

Go to solution Solved by ZachSaucier,

Recommended Posts

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

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

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

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

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

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.

  • Like 2
Link to comment
Share on other sites

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

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

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

  • Like 3
Link to comment
Share on other sites

Hey @Shaman,

 

Wow. I haven't seen any more land.
And it's so simple.
Thank you for enlightening me.

 

Happy tweening ...

Mikel

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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

 

  • Like 1
Link to comment
Share on other sites

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

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

For more info see the post about conflict:

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×