Animation hangs in the middle/half way

[Laurent Cavallini]

Hello,

I am launching into the GSAP world.

My first animation is to make au div follow the mouse.

I can do what I want by setting a timeline from -(screen width / 10) to +(screen width / 10)

Then I get the position of the mouse and I make the timeline progress thanks to (mouse position / screen size).

I try only on one axis but that don't change the behaviour.
I try to set ease property but that don't change anything too.

 

The animation hangs in the center. I do not understand why ?
My approach is wrong ?

An other question, how can I make this animation smooth ? 
Like "circ" ease I mean, currently it's linear.

Thank you

See the Pen xxExwNN by lolocava (@lolocava) on CodePen

[akapowl]

Hey @Laurent Cavallini - welcome to the forums.

 

48 minutes ago, Laurent Cavallini said:

The animation hangs in the center. I do not understand why ?

 

Sorry, I'm not quite following.

 

Do you want it's movement to be restricted and the div only lean into the direction, like it is in the demo, or do you want it to follow the mouse's every move, wherever you move the mouse?

[Laurent Cavallini]

Thank you for your reply @akapowl.

 

The movement is what I want.
But it's not smooth.
I mean, if I move my mouse from left border to right border at a linear speed, the div move fast and slow down at the middle and accelerates once the middle has passed. It seems there is a little hook feeling in the middle.
 

[akapowl]

 

On 11/26/2020 at 11:16 AM, Laurent Cavallini said:

It seems there is a little hook feeling in the middle.

 

Alright, that is probably related to the default ease being applied to each of those tweens in your timelines. 

Setting ease: 'none' to each of those seems to remove the hook-like feel in the middle.

 

Is that better for you?

 

See the Pen 9819787594d385adfa5834dd46ad2683 by akapowl (@akapowl) on CodePen

[Laurent Cavallini]

Yes ok really nice thank you !

Now how can I make the movement smooth, I mean when mouse enter to the screen, div jump to the correct position.
How can I make it smooth ? Same when I move mouse really fast, how can make the div to follow but with a smooth effect ?

Am I going on the correct way to achieve that ?

Thank you

[GreenSock]

You can just animate the progress. And you don't need to use a timeline - just use a simple fromTo() tween for each direction: 

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

 

Is that what you mean? 

 

Just don't forget the overwrite: true on at least one of the tweens, otherwise you'll create a bunch of overlapping/competing tweens on each mouse movement. 

 

Happy tweening!

[Laurent Cavallini]

Hell yeah, very powerful !

Thank you, it will be a long way to understand all your concepts.