Slightly move elements when mouse moves.

[Teebo 9 Likes (Newbie)]

Hi, I'd like to check if the implementation I have is optimal and a better way to achieve this feature.
I do not have examples to show but only the pen I have created.
I have to onMouseMove handlers on the pen.

 

I would like to also put back the elements to their initial positions when when the mouse moves out of the section.

Any guidance or suggestions are appreciated.

See the Pen MWoGWGp?editors=1010 by Teebo (@Teebo) on CodePen

[Cassie 5,122 Likes (Superhero)]

Hey there Teebo

 

For animating onMouseMove - quickSetter() is a more performant route. The mouse follower demo on this page should set you in a good direction.

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

[Teebo 9 Likes (Newbie)]

Hey Cassie, 🙂 great!, thanks a lot, I will definitely check it out!

[Teebo 9 Likes (Newbie)]

Hey @Cassie I have tried the gsap.quickSetter() function.
I might be using it wrong as I do not get smooth animation of the boxes as the mouse move.
Could it be because in my case I am not making use to the set function as mentioned in the shared documentation link?

 

This is the pen that uses quickSetter: 

See the Pen PojeQWO by Teebo (@Teebo) on CodePen

This is the initial one: 

See the Pen MWoGWGp by Teebo (@Teebo) on CodePen

I have tried something like below also:

 

This still does not give a performant  and smooth animation.
     const boxSet = gsap.quickSetter(movableElement, "css");
     boxSet({x:(e.clientX * shiftValue) / 250, y:"random(-10, 10)",  duration: 1})
Am I missing the point of the quickSetter function? 

[GreenSock 18,251 Likes (Superhero)]

You've got a ton of errors being thrown. You're referencing several variables that aren't defined. It's beyond the scope of help we provide in the forums to solve all those JS errors and try to figure out the logic in what you're attempting, but we'd be happy to help with any GSAP-specific questions. If you fix all those JavaScript errors and you still need GSAP-specific assistance, just post an updated minimal demo and we'll take a peek. 👍

[Teebo 9 Likes (Newbie)]

Sorry about that, the pens were not saved and shared old version, I have shared the wrong link for the first one.
I have updated the links now, thank you.

[OSUblake 18,475 Likes (Superhero)]

55 minutes ago, Teebo said:

This still does not give a performant  and smooth animation.

 

You don't need all that throttle code. Just replicate what is shown in the demo. The ticker throttles updates to when the screen updates.

 

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

 

You should include all the update code for all your boxes inside a single ticker call.

 

gsap.ticker.add(() => {
  
  // adjust speed for higher refresh monitors
  const dt = 1.0 - Math.pow(1.0 - speed, gsap.ticker.deltaRatio()); 
  
  // do whatever upate logic you need
  pos1.x += (mouse.x - pos1.x) * dt;
  pos1.y += (mouse.y - pos1.y) * dt;
  xSet1(pos.x);
  ySet1(pos.y);
  
  pos2.x += (mouse.x - pos2.x) * dt;
  pos2.y += (mouse.y - pos2.y) * dt;
  xSet2(pos.x);
  ySet2(pos.y);
  
  ...
});

 

[Teebo 9 Likes (Newbie)]

@OSUblake thank you,  do you mean something like this?

See the Pen WNOJBGJ by Teebo (@Teebo) on CodePen

Am I understanding?

[OSUblake 18,475 Likes (Superhero)]

You are repeating a bunch of stuff in your mouse handler. More like this.

 

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

 

[Teebo 9 Likes (Newbie)]

@OSUblake Ok ok I see, thank you so much for taking the time to correct the pen.
I appreciate, it really helped clarify the usage of the functions

[Ishav 0 Likes (Newbie)]

@OSUblake Is it possible that when we the circle moves it have a line on back likethat we using with many images

[Rodrigo 5,073 Likes (Superhero)]

Hi @Ishav and welcome to the GreenSock forums!

 

I can't grasp the concept of what you're trying to do. Please be more specific and add a minimal demo of what you're trying to do or an example in order to point you in the right direction.

 

@OSUblake made this some time ago:

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

Also check this one in the GreenSock collection:

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

Finally @Cassie addressed an image trail, mouse following thread a few days ago:

 

Happy Tweening!

[Ishav 0 Likes (Newbie)]

@Rodrigo Thanks I was talking about this. But i want this on react.

 

 

[Rodrigo 5,073 Likes (Superhero)]

Hi,

 

Please provide a simple demo so we can take a better look at what exactly you're trying to do and what possible issues you could be having in your code. So far you haven't provided us anything that we can take a look to get a better idea of your project.

 

Happy Tweening!