Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Thales Ribeiro

Rotate on Mouse

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to use greensock for an animation I have to rotate a number of objects around the mouse.
 

Anybody has any idea on how to use this code and be able to rotate multiple objects around the mouse by just one class? 

See the Pen mmKPaY by thalesribeiro (@thalesribeiro) on CodePen

Link to post
Share on other sites

GSAP is not going to help you out much here. You have to find the angle from the absolute transform origin to the mouse for every thing you want to rotate.

 

var dx = mouse.x - origin.x;
var dy = mouse.y - origin.y;
    
var transform = "rotate(" + Math.atan2(dy, dx) + "rad)";
element.style.transform = transform;

 

So something like this, although I'd probably use canvas for this many elements.

 

 

 

  • Like 5
Link to post
Share on other sites
  • 3 years later...

Hello !

I know this is an old topic but I wonder why we couldn't use GSAP in some way ?

Why do we change the css variable ?

 

Like 

gsap.to(arrow, {x: relX, y: relY, rotation: degree });
 

and the var degree comes from var degree = (radians * (180 / Math.PI) * -1);

(based on your examples)

So while the mouse is moving, we calculate the angle, and we animate our arrow so it rotates accordingly ?

Wouldn't be possible to use thios approach (even if the code is not good i'm just trying to epxlain)

 

Thanks in advance

Link to post
Share on other sites

Hey @charlesb. You can definitely use GSAP to do something like that. I'm not sure why Blake chose not to use GSAP more when creating the above demo. Perhaps it's because he set things up in a more canvas-y way? If you have a lot of elements it's smart to use canvas (but you can still use GSAP with canvas, the setup just varies).

 

Additionally you could do the above approach in a more GSAP-y way using GSAP's ticker and quickSetter

Link to post
Share on other sites

@ZachSaucier thank you for your answer.
I'm not at ease with quickSetter since it might be to hard for my level (even if I understand why it's useful).

 

I hope you or someone could help me with a GSAP solution to achieve this scenario :

A fish asset follows the mouse position and the fish asset always points toward the mouse.

 

It's a basic effect, I already saw some examples but it sometimes hard to translate from jQuery and I would like to avoid it.

 

I read some articles and Codepen exemples and I think I understood the logic (I already achieved the object following the mouse) :

- Calculate the center position of the asset (Can I get the center position? Or I need element.width/2 etc. ?)

- Calculate the vector from the center of the asset to the mouse position

- math.atan2 magic and convert from radians to degres (But I don't get which values are used ? Is it something like (mouse.x - element.centerX, mouse.y - element.centerY ) ?

- Use the variables that results as the rotation

 

Is my scenario correct?

 

I'm a not a big coder and I have notion, I would like to do it the more classic way (no jquery for example).

See the Pen oNzWzov by charlesbail_ (@charlesbail_) on CodePen

 

(the code is a non sense and I'm working on it, but just so you know I've started)

Also in this file, there is the use of the (e) element. I'm reading some articles related to events but that's a bit of abstraction to me. I'm trying to write it in "plain" javascript even if requires more typing. It's clearer for me.

 

 

I thank you in advance for your time to help me understand

 

Charles

 

Link to post
Share on other sites

There's actually a demo of using quickSetter for a mouse follower:

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

 

However, if the fish is perfectly following the mouse then its rotation about the mouse doesn't make much sense. Do you follow what I mean by that? 

 

Perhaps this thread would be more helpful to you:

 

  • Like 1
Link to post
Share on other sites

@ZachSaucierthank you, you are right I should have drawn my solution to see it was pointless. Your  topic may help me.

I again see that there is something like "mousemove", then (e). Then e.clientX.

In this case does it mean that this is the x position of the mouse ? (e being the mouse)

In this case, if it's a click event, does the (e) represents the object clicked ?

 

I'll work on this and try to find out with your example. It's a bit hard to jump from examples with different syntaxes.

Thank you for your tips

Link to post
Share on other sites

I think you'd learn more from trying things out yourself and looking up the documentation for mouse events than asking me about things :) 

  • Like 1
Link to post
Share on other sites

Haha I was coming to write to you "don't bother answering I'm watching a video where the guy starts with <<I always feared the (e) at start and wanted to ignore it>> and I feel it's completly like me".

 

Have a nice day !

  • Haha 1
Link to post
Share on other sites

Hey @charlesb,

 

Learning by doing is still the best way.

 

Here - just as a suggestion - an example of how the position of OSCAR changes when the mouse changes direction.

 

See the Pen xxEdrZL?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 1
Link to post
Share on other sites

Thank you Mikel for this demo !

I'll also work on a way to make the fish follow the cursor, and also change it's orientation.

I'll post the result when I'm done 😎

 

image.png.4c12ee66d6a9a27d80eab6c7d0f74ee5.png

Link to post
Share on other sites

If you want to get fancy you can do something like this: 

Side note: you can use the same sort of technique to make more complicated creatures like salamanders:

 

  • Like 1
  • Haha 1
Link to post
Share on other sites

@ZachSaucier

 

That fish somehow reminded me of the (weird but also super nice :D) cursor in this game here

 

 

 

 

 

Maybe for an effect like this (the stretching part, not the rotating), also Steve Gardner's POP-SVG  could work well.

Unfortunately it wasn't updated for about 2 years now.

 

See the Pen ywxOoW by ste-vg (@ste-vg) on CodePen

 

 

Link to post
Share on other sites

That "stretchiness" is a bit of a different effect usually created by having a bunch of different objects that each follow the mouse at different speeds and sizes. Blake has created some similar examples:

See the Pen mEpado by osublake (@osublake) on CodePen

See the Pen LxVaVw by osublake (@osublake) on CodePen

See the Pen reQdrN by osublake (@osublake) on CodePen

 

Or this by Cassie:

See the Pen VwZBjRq by cassie-codes (@cassie-codes) on CodePen

 

In looking for those demos I also found this one by Blake that's more similar to the effect that the OP asked about:

See the Pen dmPyaw by osublake (@osublake) on CodePen

  • Like 2
Link to post
Share on other sites

Thank you Zach, your different examples (yours ans Mikel s) helped me to understans the logic

I managed to do a quick pen (ugly code) to get the main thing working

https://codepen.io/charlesbail_/pen/gOwROoE

 

I quickly understood its limitations and the need to check the difference between values after a certain distance for example.
I also need to learn more about "delta" which I'm not familiar with. I will look at some explanations.
Thank you for your ressources

  • Like 1
Link to post
Share on other sites

 

The fish has undergone a makeover and is now swimming happily following the mouse.

 

See the Pen gOwRZON by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 3
Link to post
Share on other sites

 

What kind of phenomenon is that? Seconds after the last mouse move, the fish twitches.

I suspect my code is a little crazy and animates the ticker to linger after a while. Or AI?

 

Happy fishing ...

Mikel

 

Link to post
Share on other sites
18 minutes ago, mikel said:

 

What kind of phenomenon is that? Seconds after the last mouse move, the fish twitches.

I suspect my code is a little crazy and animates the ticker to linger after a while. Or AI?

 

Happy fishing ...

Mikel

 

Hello Mikel ! I don't see any problem with Chrome or Firefox. Animation runs smoothly and there are no twitches

Link to post
Share on other sites

 

Everything looks great during mousemove.
But if you have moved the mouse back and forth and then let it lie still:

after a few seconds ... a ghost mouse or a ghost fish?

Link to post
Share on other sites

I'm not seeing any ghost fish or twitching. What OS and browser are you seeing it in?

Link to post
Share on other sites

Ah, I see it. You have to wait a long time :) 

 

I'm pretty sure it's due to your dx and dy being really really small which eventually starts to have trouble due to how JS handles really small numbers, unrelated to GSAP's functionality. 

 

If you only update the rotation if it is above a certain threshold it doesn't spaz:

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

  • Like 3
Link to post
Share on other sites

 

Hey Zach,

 

No myth, just small numbers.
Thanks for the explanation.

 

Mikel

Link to post
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.

×