Jump to content
GreenSock

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

Slightly move elements when mouse moves.

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, 🙂 great!, thanks a lot, I will definitely check it out!

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

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.

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

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

 

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

 

  • Like 5
Link to comment
Share on other sites

@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

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