Jump to content
GreenSock

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

Animation hangs in the middle/half way

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

 

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

Hell yeah, very powerful !

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

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