Draggable with Physics and Throw Props Inertia collision (mimic of Matterjs)

[Dennyno 42 Likes (Newbie)]

Hi all, starting from this example basic pen and @OSUblake one 

See the Pen a820ab5bf748b4d1f45083edb2a0843f by osublake (@osublake) on CodePen

 is possible to achieve the same as 

See the Pen LYJEoZM by gayane-gasparyan (@gayane-gasparyan) on CodePen

 falling and draggable words with collision bouncing event?

Is something GSAP could do, even not being a 2D canvas engine?

See the Pen ALgdjV by GreenSock (@GreenSock) on CodePen

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

Sure thing, with Draggable you can use the hitTest and update methods in order to update the bounds of specific elements. You'll have to write the collision logic on your own though in order to move other elements as you drag another. Is worth noticing that Draggable does not work on canvas elements due to the nature of how canvas works, so if you want to use canvas you can definitely use GSAP for the animations, but collision detection, collision logic and physics and other stuff will require a different library.

 

Unfortunately I know nothing on this subject so I can't help you or point you in any direction. There is a good chance though that @OSUblake has something that does something like this so you could comb through his codepen examples and see if there is anything or make a google search and see what comes up.

 

Good luck with your project!

Happy Tweening!

[Dennyno 42 Likes (Newbie)]

Yep, I'll quitely wait here
I spent the whole week looking for something gsap related and did some tests..
basically the splitTexted texts are draggable, but even setting absolute position and display:block... nothing works on my side, also inside GSAP Codepen's... seems that Draggable and Physics2D plugin (specially the second one) showcases... seems "abandoned" with the few demos available.
I'm joking 😅 btw I found nothing that could fit

[Cassie 5,650 Likes (Superhero)]

For collision physics you're going to have more luck with matter.js

 

Collision physics is a whole thing and GSAP doesn't have a physics engine, physics 2D is kinda simulated physics, physics-ish. But matter.js covers a ton of stuff. You can trigger matter animations from GSAP timelines and stuff too if necessary, I've kinda mix-and-matched them before.

https://brm.io/matter-js/

[Dennyno 42 Likes (Newbie)]

Thanks @Cassie, gonna see what happens