Shehroz Posted January 6, 2023 Share Posted January 6, 2023 Hy, i need collision detection bubbles with mouse interation. Like this https://www.qurieux.fr/en/ Link to comment Share on other sites More sharing options...
Rodrigo Posted January 6, 2023 Share Posted January 6, 2023 Hi @Shehroz and welcome to the GreenSock forums! That definitely can be animated with GSAP, but collision detection/interaction is a complicated thing which is a bit out of the reach of what GSAP does. You should investigate a physics library in order to accommodate that and, as I mentioned, you can animate things using GSAP. We don't have the time resources to provide this type of solutions since GSAP is not designed for that type of things and we need to keep the forums focused on GSAP related questions. You can check these resources: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection This guy has a lot of excellent resources (I've watched a few videos and he explains things really well): Hopefully these help you get started. Let us know if you have any GSAP related issue and remember to create a minimal demo as well. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Solution Shrug ¯\_(ツ)_/¯ Posted January 6, 2023 Solution Share Posted January 6, 2023 2 hours ago, Rodrigo said: collision detection/interaction is a complicated thing which is a bit out of the reach of what GSAP does. You should investigate a physics library in order to accommodate that 👆Indeed. That site appears to be using Matter.js for the collision detection logic / effects. As Rodrigo pointed out in his post, you can benefit greatly from understanding the general logic of basic collisions yourself before using a complex library like Matter.js to go further. 1 Link to comment Share on other sites More sharing options...
SteveS Posted January 6, 2023 Share Posted January 6, 2023 Not as well established, but something I have been playing with is Rapier.js Its documentation isn't the best yet and there's few resources on it, but it is still pretty cool if you want to try it out. 1 Link to comment Share on other sites More sharing options...
Shehroz Posted January 7, 2023 Author Share Posted January 7, 2023 13 hours ago, Shrug ¯\_(ツ)_/¯ said: 👆Indeed. That site appears to be using Matter.js for the collision detection logic / effects. As Rodrigo pointed out in his post, you can benefit greatly from understanding the general logic of basic collisions yourself before using a complex library like Matter.js to go further. how can i add stars as bodies in matter.js Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 7, 2023 Share Posted January 7, 2023 Anyone is welcome to answer your question, but please beware that these forums are only supposed to be for GSAP-specific questions. Matter.js is a 3rd party library that's totally unrelated to GSAP, so you probably won't get many answers here for things like that. Good luck with your project. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted January 7, 2023 Share Posted January 7, 2023 Matter.js is not a GSAP product, so there is no support provided for it here, that is out of the scope of this forum. However you will find many example demos on their site, CodePen, etc., all the links can be found on their site. Maybe take a look at using sprites (again many examples can be found for this) in doing so you can use any desired shape or object. All the best on your project. 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