Jump to content
Search Community

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

Dennyno test
Moderator Tag

Go to solution Solved by Dennyno,

Recommended Posts

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

Link to comment
Share on other sites



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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.


  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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.
  • Create New...