Playing an animation changes behaviour of next animation

Questions
#1

Hi,
I am trying to animate the stories of a house. It should be possible to animate the house to the first story and after that to the second story. Like this:
Bildschirmfoto 2020-03-19 um 16.19.55

The animations look fine in the gltf viewer. When I play the animation to the first story (“Stock 1”), it works perfectly, but when playing the animation to the second story (“Stock2”), the cube does not get animated to the full extend of the story. Calling the animations separately also works. It seems like that the first animation somehow influences the following animation.

This is how I play the animation clips:

  this.action = this.mixer.clipAction(clip)
  this.action.reset()
  this.action.timeScale = 1
  this.action.setLoop(THREE.LoopOnce)
  this.action.clampWhenFinished = true
  this.action.play()

The gltf file: house-stories (241.7 KB)

Thank you for your help!

#2

Try to remove this line since setting AnimationAction.clampWhenFinished to true will only pause the animation on its last frame meaning it still influences the model.

How to play animations consecutively?
#3

How am I able to stop the animation on the last keyframe then? When I play the animation without clampWhenFinished the animation plays once and jumps to the starting position (like in the gltf viewer).

#4

Okay, I see not what you mean. Maybe you can try to achieve the intended effect by using a brand-new feature called additive animations. The influence of each animation won’t be weighted/normalized but added together. The following example demonstrates this feature:

https://threejs.org/examples/webgl_animation_skinning_additive_blending

You can make your animation clips additive by this call and then use them as usual:

THREE.AnimationUtils.makeClipAdditive( clip );
#5

Thank you for your help @Mugen87! Unfortunately this does not work. What I want to achieve is to move an object from one position to another using animations. The end state of the first animation is the starting point for the second animation. How can I achieve this without clamping?