Jump to content

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

Help rotating particles 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 am currently trying to get an animation to rotate some particles based on the mouse cursor like the 'Default Demo' here. If you look at the codepen I linked, I can get the basic spinning working, but I need for the animation to follow the mouse and have min/max rotations link the demo. Is this possible? I don't need the circle to shrink/expand, I just need it to rotate based on the mouse cursor. Thanks in advance!

See the Pen jONoNJE by austin-areaux (@austin-areaux) on CodePen

Link to comment
Share on other sites

Hello aareaux and welcome to the GreenSock forums. It's definitely possible.


It looks like you took the basic part of the particles code from somewhere without attributing the original. That's not very nice. I highly recommend that you include proper attribution and leave it commented in your code (this is likely even required by the licensing on those sites).  


But to address your question, it's likely harder than you think. Currently there's only support for rotation in one direction at a time in that code. You will need to add support for rotating in both the x and y directions at the same time.


Once you get that done, you will need to do the following:

  • Set a max and min vertical and horizontal rotation angle, i.e. something like -180 and 180 in the vertical direction and maybe -270 and 270 in the horizontal direction.
  • Map the mouse coordinates in the viewport to the respective min and max values that you set above. For example, if the user's mouse is at the viewport's 0, 0 coordinate, change the rotX to -270 and rotY to -180.
  • Feed those rotation angles into the function, likely doing some interpolation to get the timing to look good. 

A better approach might be to use something that supports 3D out of the box (like WebGL, which renders to canvas) or find a demo that does something similar to what you're wanting (for example, purchasing the theme that you link to in your post above). 


Let us know if you run into any specific issues, especially related to GSAP (since that's what this forum is primarily for :)).


Happy tweening.

  • Like 2
Link to comment
Share on other sites

Hey Zach,

First, I apologize for the confusion. I actually got the code for my example from here https://codepad.co/snippet/javascript-rounded-particle-circle. I couldn't find anywhere, other than linking the user that created (copied - which is what it looks like based on your find of the actual original site) the codepad. I also should have been more specific in my original post. I was mainly wanting to know if something like this was possible with GSAP pretty easily. I could probably brute force the code in the CodePen I linked but I wanted to see if there was a more efficient way to do it ( from what I've read, GSAP is much more efficient). Thanks, and sorry again for the lack of referencing where I pulled the example from.

Link to comment
Share on other sites

15 minutes ago, aareaux said:

sorry again for the lack of referencing where I pulled the example from.

No worries, I just wanted to be sure that the creator is attributed :) 


15 minutes ago, aareaux said:

I wanted to see if there was a more efficient way to do it ( from what I've read, GSAP is much more efficient).

If you're talking about performance, GSAP is very performant (but that demo is as well). You can definitely create something like it using GSAP. You could even use the same logic but use GSAP for updating the values. But GSAP is primarily a property animator, so the logic for this sort of thing you'd have to write yourself.


If you used something that supported 3D (like WebGL, but even DOM elements - they'd just be less performant), the logic would be pretty straightforward: 

  • Create a "sphere" made of other spheres like you have above.
  • Rotate the bigger sphere based on the logic I outlined above. 

The next version of GSAP (the beta is available to Shocking Green and Business Green members) even has mapping and interpolation functions built in to make this sort of thing easier. 


Do you get what I'm trying to say in that it's definitely possible but would still take some custom logic? 

  • Like 1
Link to comment
Share on other sites

Yep! I am looking into three.js now for the geometry and then I'll try to hook GSAP into it for the actual animation. Hopefully I can get it to work as our marketing department is looking to create numerous of these types of animations. If the addons speed up development time, I may be able to convince them to to purchase a Business Green license :) . I'll be back if I have any more specific questions on the GSAP animations. Thanks for helping out!

  • Like 1
Link to comment
Share on other sites

I've searched in a lot of forums and sub forms on here and I can't quite figure this out...

I've remade a similar codepen using three.js and it is pretty much the same (albeit much less code) as the initial codepen I added to this thread. I can get it working with the mouse (it is a little clunky but good for a POC). Now I am trying to get Tween to work to slow the animation down to where it doesn't snap to the mouse pointers location. In the codepen I have the Tween code commented out and the values that are setting the rotation in. I can't seem to get the tween to work, I am getting a 'cannot create property '_gsTweenID' error. 

I've looked through a couple forum posts and it references that you shouldn't specify the *.y or *.x properties, but I can't get any rotation out of it when I remove them. 

See the Pen LYPKRXP by austin-areaux (@austin-areaux) on CodePen

  • Like 1
Link to comment
Share on other sites

Nice work!


GSAP is essentially a property animator, so you should really just be pointing the tween to the particles.rotation object and tell it which properties to update, like so:


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


I also included a .kill() to make sure that there's no conflict when the mouse position updates.

  • Thanks 1
Link to comment
Share on other sites

This is perfect! Thank you so much! I think I understand the use of Tween now. I should be prepared if I am required to scale it like the example they sent me :). Thanks again!

Link to comment
Share on other sites

By adding and animating an additional container you can get some fun effects with scaling and additional rotation :) 


See the Pen JjPQyLV by GreenSock (@GreenSock) on CodePen


Or even add some depth by animating the vertices themselves:


See the Pen KKPjXXb by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Very Nice! Super simple too once you understand the usage. Thanks for that. I can guarantee if I create a 'demo' of all the features, they'll want to implement some fancy effects. Thanks again for all the help Zach

  • Like 1
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.