Physics2D restart animation with different (random) velocity/angle

[jakob zabala]

I am messing around with the physics 2D demo on the docs page. 

 

I am trying to figure out how to change the actual animation so each time I hover into the space the balls get shot out randomly each time! (without 

 

Thanks!

See the Pen qBRKzqN by jaykobz (@jaykobz) on CodePen

[OSUblake]

Here's a start. 

 

See the Pen 2875503ec594830f0a2cd6766cf5bf41 by osublake (@osublake) on CodePen

 

[jakob zabala]

Thank you!!

[jakob zabala]

One more thing! I am quite new to using gsap and js in general. If i wanted to wait for the animation to finish to allow it to play again where would I use the isActive()? 

 

I can't find a good example!

[GreenSock]

My recommendation: don't do that. As a user, I hate when the UI seems unresponsive to my interactions because they've blocked things until animations finish. I think it's much better to make it instantly reactive, and just generate some new dots if necessary. 

 

Here's a fork of @OSUblake's that has a dot pooling system, where you can just request a certain number of dots and it'll pull them from the Array if they're not currently "active" (animating). If it can't find any, it'll generate new ones and put those in the Array. So it reuses things as often as it can for performance reasons, but if it runs out (because the user moused over a bunch of times quickly), it'll generate new ones. 

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

 

Is that the effect you're going for? 

[jakob zabala]

@GreenSock Yes this precisely what I was looking to do, I was "okay" with waiting for the animation to end but this solution is much more ideal!

 

GSAP has been my intro to JS, do you recommend any websites/articles that explain JS concepts involving logic, looping and techniques like these that would help me build these types of dynamic animations? (as I realise these issues I am having are more to do with JS and less with GSAP)

 

Thank you !!🙏

 

[GreenSock]

8 hours ago, jakob zabala said:

Yes this precisely what I was looking to do, I was "okay" with waiting for the animation to end but this solution is much more ideal!

Excellent!

 

8 hours ago, jakob zabala said:

GSAP has been my intro to JS, do you recommend any websites/articles that explain JS concepts involving logic, looping and techniques like these that would help me build these types of dynamic animations? (as I realise these issues I am having are more to do with JS and less with GSAP)

There are tons of resources out there for that. If you want a top-quality video series focused on GSAP, I'd highly recommend @Carl's course: https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

I've heard from many people who say GSAP served as a "gateway drug" of sorts - it helped ease them into JS concepts and made it less intimidating and more productive. I love hearing that. 

 

Good luck with the learning journey. 

[jakob zabala]

exactly what I was looking for SUPER big thanks!