How to "add an observable" to AnimationGroup for right after the first frame is played


  1. An Array of AnimationGroups loaded from a GLTF document are played from start to finish once. The groups scale down meshes on the scene. Initially meshes are large.

  2. After all groups have ended the meshes are small.

  3. I fit the camera to match the new scale. The camera is not constantly fit while the animations are played. Just at the end when meshes are small.

I am looking for a way to press a button and play the animations again from 0 to AnimationGroup#to (AnimationGroup - Babylon.js Documentation) that will scale the meshes from large to small again.

What I can not do is fit the camera after the animations (that were at last frame, and now are on the first frame) have played their first frame and have scaled the meshes back to large. How could such an observable be implemented?

this._animationGroups.forEach((ag)=> {
        ag.onAnimationGroupEndObservable.addOnce((eventData,eventState)=> {
          if(scope._animationsGroupsEnded==scope._animationsGroupsTotal) {
            // ! this works correctly and fits the camera at the end
          if(scope._animationGroupsPlayed == scope._animationsGroupsTotal) {
            // ! this fires after the animation is 'played' but before it is on frame 0. 
            // so the fitCamera() will take the bounding box of the previous state
            // which is still the last frame of the animation where it was stopped.


I think this is a good candidate for animation events: