Multiple animations affecting the same object

hi everyone.

I am loading a GLB model. Let’s say it is a box with many doors and a ball inside.
I need to open the doors, keep them opened and then animate the ball, either by doing animation_a (deflate the ball) or animation_b (move the ball). you can also close the doors.

MY code for playing each animation is:

    const clip = THREE.AnimationClip.findByName( clips, clip_name );
    const action = mixer.clipAction( clip );

    if (action) {
        action.clampWhenFinished = true;
        action.repetitions = 0;
        action.loop = false;
        action.paused = false;
        action.enabled = true;
        if (chap.action === 'close') {
            action.timeScale = -1;
        } else {
            action.timeScale = 1;
            action.time = 0;


but this is giving me weird end state. like the ball being deflated when I move it even I played the deflate animation backwards.
so I added an eventListener ‘finished’ to the mixed and if the action was playing backwards, I reset it and stop.

But this makes me think I am missing something, the solution seems too convoluted.
I have read the intro to the animation system and the mixers but I feel like I am missing something.

Any help/guidance will be appreciated.


Does the source code for this example help at all? three.js examples … it includes faded transitions between animations and should fully reset animations after they play.

It’s also worth noting that if two animations attempt to animate the same property of the same object (e.g. ball.scale) this will cause issues. You can list the track names in each clip to check for that.

Thanks @donmccurdy this looks indeed helpful.

We do have the same property of the same object affected by two different animations.
What would be the recommended approach in this case?

That’s really case-specific, but if you have two tracks saying the same object should be in two locations, it can’t be in both. If one of those tracks is empty (e.g. just has position=0,0,0 or scale=1,1,1) you could remove the track. If you want both to apply then there’s an option for additive animation.