Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

gsap and spine2d pipeline engines

Recommended Posts

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 post
Share on other sites

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);

you can see some live demo here, it very similar to dragonBone if you know.

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 post
Share on other sites

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 :) 

  • Thanks 1
Link to post
Share on other sites

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);
            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 post
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.