Jump to content
GreenSock

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

Move mouse + Rotational inertia feeling

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, am trying to tween little bit physic inertia when the mouse move.

I don't know if is the good word in english. "inertness" ?


My target it when mouse are move, the sprite follow the mouse with inertia on rotation values.
But when mouse stop, call a elastic tween to give a physic feeling.
The result are not optimal here , and maybe no very performance friendly.
If any tweener or math pro can help me on this ?

A made a codePen

 

if you try Move mouse and stop it very fast , you will see the feeling am targeting.
It not work all time this is also weird, maybe bad code or math logics here.
Am no a pro in physic sorry. :)

thanks a lot for any help guys

 

 

.

See the Pen EJzBzV by djmisterjon (@djmisterjon) on CodePen

Link to post
Share on other sites

Hi,

 

As time goes by mouse - with a certain inertia.

or
If you want to keep track of the time ...

 

See the Pen WWqjmj by mikeK (@mikeK) on CodePen


Insane code!

 

Your pen is no longer available.
Inertia could also be controlled with an appropriate ease.

 

See the Pen jdaJrw by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Thanks 1
Link to post
Share on other sites

Thank you both.
I took the time to study the demo 2, unfortunately they seem based on inertia with the x and y position.
They are very impressive! but on my side, I can not use this logic of interpolation to reach my idea, I have to tween with this with the rotation, the radian and the pivot.
As you can see, no position is used in the code code.

 

My issue, in the codePen is this.
When mouse stop move, it tween inertia the radian, but it not work fine.
I may have a bad logic or approach...

 

i really need when stop move the cursor, the item pinned give a more feeling of elastic .

aKC1WlZF_o.gif

 

here the pen link

See the Pen EJzBzV by djmisterjon (@djmisterjon) on CodePen


it should work ?

 

i hope the gif can help to understand my issue :)
I explain myself bad in english

Link to post
Share on other sites

 

Hi @jonForum,

 

What about ease Elastic ?  see pen on right side ...

 

Mikel

 

 

Link to post
Share on other sites

yes it what am also think, but seem without success !

      TweenMax.to(bunny, 0.6, {
        rotation: 0,
        ease: Elastic.easeOut.config(4, 0.6),
      });

sometime it seem work, sometime no ... , i can't get the correct feeling.
 

Link to post
Share on other sites

Hi @jonForum,

 

Just a funny trick: If the subject has more height, the vibrations are more dramatic.

 

See the Pen jRjRzj by mikeK (@mikeK) on CodePen

 

And then there's the super CustomWiggle.
I tried it, but the wiggles were to strong ... (see code).

 

Happy tweening ...

Mikel

Link to post
Share on other sites

 

But now ...

MouseMove and timeOut could be optimized, but the oscillations

are now great from my point of view - thanks to convenient GreenSock CustomWiggel.

 

See the Pen ZZgYgO by mikeK (@mikeK) on CodePen

 

Happy wiggling ...

Mikel

 

  • Thanks 1
Link to post
Share on other sites

i don't know if is because canvas rendering by cpu or if is the GreenSock CustomWiggel but performance are very poor here.
Very laggy and freeze on my AMD ryzen 16 core , gtx 1070
Hope it because no gpu render here ! 
98N46KNE_o.png

Maybe use a webGL renderer here can help
https://themoonrat.github.io/webgl-benchmark

Link to post
Share on other sites

Hi, @jonForum,

 

Sorry, I forgot something: line 17.
If user was too fast after a stop, frog no longer came after.

 

Please try it again.

 

Kind regards

Mikel

 

 

Link to post
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.

×