Jump to content
Search Community

Slightly move elements when mouse moves.

Teebo test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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. 👍

Link to comment
Share on other sites

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);
  
  ...
});

 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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!

  • Like 1
Link to comment
Share on other sites

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!

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.
×
×
  • Create New...