Share Posted November 26, 2020 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 More sharing options...
Share Posted November 26, 2020 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 More sharing options...
Author Share Posted November 26, 2020 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 More sharing options...
Share Posted November 26, 2020 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 2 Link to comment Share on other sites More sharing options...
Author Share Posted November 26, 2020 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 More sharing options...
Share Posted November 26, 2020 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! 4 Link to comment Share on other sites More sharing options...
Author Share Posted November 26, 2020 Hell yeah, very powerful ! Thank you, it will be a long way to understand all your concepts. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now