Jump to content
Search Community

Gsap.set on requestAnimationFrame

Learning test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi guys,

I'm working on a little Tsum Tsum game clone. ( https://www.youtube.com/watch?v=iqQrQtorM9c )

I figured that I'll have to use Matter.js to implement the physics of my objects bouncing off each other and dropping into screen.
But because Matter.js doesn't have the ability ( I think ) to select multiple objects at the same time using its mouse constraints, I am attempting to simply use dom elements ( since there won't be that many anyways ) and then move them on requestAnimationFrame according to the engine results of Matter.js. This way I have the full control of highlighting my objects when multiple objects and selected via dragging the mouse across them.

What I'm thinking of doing is simply looping through my objects array, and finding the respective dom element and then use gsap.set on each of them on every requestAnimationFrame to mimic the physics implemented by Matter.js. Does that sound like a dumb way to implement this or is there a better way in gsap to follow the results of the engine?

Link to comment
Share on other sites

  • Solution

I'm not familiar with Matter.js, so I really can't offer much advice but if you're simply applying x/y transforms on each requestAnimationFrame, there's no point to doing gsap.set() at all - just apply them directly like:

element.style.transform = "translate(" + x + "px, " + y + "px)";

That'd deliver better performance. Of course GSAP is optimized for performance, but it'd cost more to create that set() call (which is just a zero-duration tween) for every object on every tick. If you really want to use GSAP, use gsap.quickSetter() but even that is unnecessary for what you're doing (from what little I know at this point about your project). 


Good luck with the project. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@GreenSock Icic, I guess I'll just stick to the individual element manipulation then. I thought it might be easier as I might want to change more properties like alpha, size, rotation, etc and using gsap I can just pass everything into the set option. But after thinking through and reading your reply, it does seem a little excessive to use an animation engine when I'm not actually making full use of the 'tweening' capabilities of gsap.

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