Objects interact with mouse move

[Vic Novosad]

Hi guys!

Please help me! I am trying to make objects interact with mouse movement.

And with gsap it kind of works with depth as a constant, 

See the Pen qBorjPQ by vicnovo (@vicnovo) on CodePen

but I want to take data-depth setting and set for each object

I guess it will be easier to go with timeline, but for some reason with time line it doesn't play and I stuck, don't understand why it doesn't play ((

here is the codepan version with timeline effort, it plays just one time.

I understand I suppose to put objects to array outside of function with event listener and change somehow settings for each layer inside of function and after that play time line, but can't get it how to do it the right way .. please, help!!

See the Pen bGvqRKB?editors=0010 by vicnovo (@vicnovo) on CodePen

[Cassie]

Heya, yeah, I see what you're after, but you definitely don't want to be using a timeline here.

Timelines are great for sequencing animations, but they're not good for dynamic stuff like this. At the moment you're adding huge numbers of tweens to that timeline (three on every mouse movement) Each of those tweens is being positioned on that timeline - starting at a position of 0 and playing for 0.5 seconds. So after 0.5 seconds the timeline is over but you're still adding tons of tweens to it. Definitely not what you want.

 

Tweens and a loop in order to grab the index is likely what you want?

See the Pen BarWPyB?editors=1010 by GreenSock (@GreenSock) on CodePen

Just a note though - on mouse move, because it fires so much, it's good to use either QuickSetter or QuickTo for speedy performant animations.

If you learn from articles maybe give this a read?

https://www.cassie.codes/posts/making-a-lil-me-part-1
 

If you want to jump right to docs - here's the docs on quickTo

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

Hope this helps!

[Vic Novosad]

Cassie you are awesome!! Thank you very much it was really helpful, ... going to your article!

Your animation is really coool by the way!

[Cassie]

Glad it helped!

 

[Dax2]

Hi @Cassie

Is it possible to achieve better perfromance with easing if I kill the previous animation/tween before starting a new one for new mouse coordinates?

[GreenSock]

3 hours ago, Dax2 said:

Is it possible to achieve better perfromance with easing if I kill the previous animation/tween before starting a new one for new mouse coordinates?

Could you clarify what you mean? Killing the previous animation before starting a new one would definitely deliver better performance than not killing the previous animation first, but a quickTo() is certainly even better than that. Is that what you wanted clarified? 

[Dax2]

Thanks @GreenSock! I did not realise quickTo had easing option. But yes, that does answer my question.