jonForum Posted November 9, 2019 Share Posted November 9, 2019 hey guys do you think gsap3 can have some more easy support to help with spine2d animations events , or do you have example of good implementation and user case ? Am just curious ! http://esotericsoftware.com/spine-api-reference Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 9, 2019 Share Posted November 9, 2019 Hey Jon, I've never heard of Spine. But GSAP should work great with any JS object that you give it, no matter what library you're using. Have you run into any issues using it? Do you have a demo that is non-optimal that exemplifies where you think GSAP could do better? Link to comment Share on other sites More sharing options...
jonForum Posted November 9, 2019 Author Share Posted November 9, 2019 no issue but very hard to manage, my brain burn when i need mix spine2d animations and timeline, i alway need use call or callback like this tl.addCallback(() => { spine.state.setEmptyAnimation(4, 0.1); ..... },0); ....... you can see some live demo here, it very similar to dragonBone if you know. https://pixijs.io/examples/#/plugin-spine/pixie.js the issue is i have some difficulty to sync animation with the spine engine. I alway need compute time manually and this make thing really hard. But yes it a good idea, i can maybe try made a live demo of user case for gsap and spine2d on codepen in few day. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 9, 2019 Share Posted November 9, 2019 GSAP has a PixiPlugin for working with pixi objects since it's so common. You could make the same sort of thing for Spine (after GSAP 3 is released, Jack may even help you with that). I'm not sure what all that setEmptyAnimation does in Spine, but if it is affecting a particular object or objects that you have access to in JS, you could use a .set() call to change them with GSAP. If you put together a little demo it would help make this discussion a bit less abstract 1 Link to comment Share on other sites More sharing options...
jonForum Posted November 9, 2019 Author Share Posted November 9, 2019 in this case it not related with pixijs objects, i found very easy to use pixijs in gsap vanilla. The issue here is more about how i can manage and sync the spine animations with gsap timeLine. example here , we need play a lot of spine2d animations, if i change timeScale, or addPause, all thing because hard to manage. function jumpOutBed() { const startCase = $objs.LOCAL[25]; const tl = new TimelineMax(); tl.addCallback(() => { p0.s.state.setEmptyAnimation(4, 0.1); p0.s.state.setEmptyAnimation(3, 0.1); p0.s.state.setAnimation(3,"reversX",false) p0.s.state.addAnimation(3,"jump3",false,0) p0.s.state.addEmptyAnimation(3,0.1,0); },0); tl.to(p0.p.position3d, 0.4, {x:startCase.child.p.position3d.x,y:0,z:startCase.child.p.position3d.z, ease:Power4.easeIn },1); return tl; }; I will try think about a summary solution and add a short and clean demo as soon possible, i think it will more easy to understand with visual concept. thank you so much for your time. 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