Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

Physics2D restart animation with different (random) velocity/angle

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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? 

  • Like 4
Link to comment
Share on other sites

@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 !!🙏

 

Link to comment
Share on other sites

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. 

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