Fix #4277

dist/preview release/babylon.max.js

@@ -52572,6 +52572,10 @@ var BABYLON;
             this._speedRatio = 1;
             this._weight = -1.0;
             this.animationStarted = false;
+            /**
+             * Observer raised when the animation ends
+             */
+            this.onAnimationEndObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -52730,6 +52734,12 @@ var BABYLON;
         Animatable.prototype.restart = function () {
             this._paused = false;
         };
+        Animatable.prototype._raiseOnAnimationEnd = function () {
+            if (this.onAnimationEnd) {
+                this.onAnimationEnd();
+            }
+            this.onAnimationEndObservable.notifyObservers(this);
+        };
         Animatable.prototype.stop = function (animationName) {
             if (animationName) {
                 var idx = this._scene._activeAnimatables.indexOf(this);
@@ -52744,9 +52754,7 @@ var BABYLON;
                     }
                     if (runtimeAnimations.length == 0) {
                         this._scene._activeAnimatables.splice(idx, 1);
-                        if (this.onAnimationEnd) {
-                            this.onAnimationEnd();
-                        }
+                        this._raiseOnAnimationEnd();
                     }
                 }
             }
@@ -52758,12 +52766,19 @@ var BABYLON;
                     for (var index = 0; index < runtimeAnimations.length; index++) {
                         runtimeAnimations[index].dispose();
                     }
-                    if (this.onAnimationEnd) {
-                        this.onAnimationEnd();
-                    }
+                    this._raiseOnAnimationEnd();
                 }
             }
         };
+        Animatable.prototype.waitAsync = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                _this.onAnimationEndObservable.add(function () {
+                    resolve(_this);
+                }, undefined, undefined, _this, true);
+            });
+        };
+        /** @hidden */
         Animatable.prototype._animate = function (delay) {
             if (this._paused) {
                 this.animationStarted = false;
@@ -52802,8 +52817,8 @@ var BABYLON;
                     runtimeAnimations[index].dispose();
                 }
             }
-            if (!running && this.onAnimationEnd) {
-                this.onAnimationEnd();
+            if (!running) {
+                this._raiseOnAnimationEnd();
                 this.onAnimationEnd = null;
             }
             return running;

dist/preview release/babylon.no-module.max.js

@@ -52539,6 +52539,10 @@ var BABYLON;
             this._speedRatio = 1;
             this._weight = -1.0;
             this.animationStarted = false;
+            /**
+             * Observer raised when the animation ends
+             */
+            this.onAnimationEndObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -52697,6 +52701,12 @@ var BABYLON;
         Animatable.prototype.restart = function () {
             this._paused = false;
         };
+        Animatable.prototype._raiseOnAnimationEnd = function () {
+            if (this.onAnimationEnd) {
+                this.onAnimationEnd();
+            }
+            this.onAnimationEndObservable.notifyObservers(this);
+        };
         Animatable.prototype.stop = function (animationName) {
             if (animationName) {
                 var idx = this._scene._activeAnimatables.indexOf(this);
@@ -52711,9 +52721,7 @@ var BABYLON;
                     }
                     if (runtimeAnimations.length == 0) {
                         this._scene._activeAnimatables.splice(idx, 1);
-                        if (this.onAnimationEnd) {
-                            this.onAnimationEnd();
-                        }
+                        this._raiseOnAnimationEnd();
                     }
                 }
             }
@@ -52725,12 +52733,19 @@ var BABYLON;
                     for (var index = 0; index < runtimeAnimations.length; index++) {
                         runtimeAnimations[index].dispose();
                     }
-                    if (this.onAnimationEnd) {
-                        this.onAnimationEnd();
-                    }
+                    this._raiseOnAnimationEnd();
                 }
             }
         };
+        Animatable.prototype.waitAsync = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                _this.onAnimationEndObservable.add(function () {
+                    resolve(_this);
+                }, undefined, undefined, _this, true);
+            });
+        };
+        /** @hidden */
         Animatable.prototype._animate = function (delay) {
             if (this._paused) {
                 this.animationStarted = false;
@@ -52769,8 +52784,8 @@ var BABYLON;
                     runtimeAnimations[index].dispose();
                 }
             }
-            if (!running && this.onAnimationEnd) {
-                this.onAnimationEnd();
+            if (!running) {
+                this._raiseOnAnimationEnd();
                 this.onAnimationEnd = null;
             }
             return running;

dist/preview release/es6.js

@@ -52539,6 +52539,10 @@ var BABYLON;
             this._speedRatio = 1;
             this._weight = -1.0;
             this.animationStarted = false;
+            /**
+             * Observer raised when the animation ends
+             */
+            this.onAnimationEndObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -52697,6 +52701,12 @@ var BABYLON;
         Animatable.prototype.restart = function () {
             this._paused = false;
         };
+        Animatable.prototype._raiseOnAnimationEnd = function () {
+            if (this.onAnimationEnd) {
+                this.onAnimationEnd();
+            }
+            this.onAnimationEndObservable.notifyObservers(this);
+        };
         Animatable.prototype.stop = function (animationName) {
             if (animationName) {
                 var idx = this._scene._activeAnimatables.indexOf(this);
@@ -52711,9 +52721,7 @@ var BABYLON;
                     }
                     if (runtimeAnimations.length == 0) {
                         this._scene._activeAnimatables.splice(idx, 1);
-                        if (this.onAnimationEnd) {
-                            this.onAnimationEnd();
-                        }
+                        this._raiseOnAnimationEnd();
                     }
                 }
             }
@@ -52725,12 +52733,19 @@ var BABYLON;
                     for (var index = 0; index < runtimeAnimations.length; index++) {
                         runtimeAnimations[index].dispose();
                     }
-                    if (this.onAnimationEnd) {
-                        this.onAnimationEnd();
-                    }
+                    this._raiseOnAnimationEnd();
                 }
             }
         };
+        Animatable.prototype.waitAsync = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                _this.onAnimationEndObservable.add(function () {
+                    resolve(_this);
+                }, undefined, undefined, _this, true);
+            });
+        };
+        /** @hidden */
         Animatable.prototype._animate = function (delay) {
             if (this._paused) {
                 this.animationStarted = false;
@@ -52769,8 +52784,8 @@ var BABYLON;
                     runtimeAnimations[index].dispose();
                 }
             }
-            if (!running && this.onAnimationEnd) {
-                this.onAnimationEnd();
+            if (!running) {
+                this._raiseOnAnimationEnd();
                 this.onAnimationEnd = null;
             }
             return running;

dist/preview release/viewer/babylon.viewer.max.js

@@ -52660,6 +52660,10 @@ var BABYLON;
             this._speedRatio = 1;
             this._weight = -1.0;
             this.animationStarted = false;
+            /**
+             * Observer raised when the animation ends
+             */
+            this.onAnimationEndObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -52818,6 +52822,12 @@ var BABYLON;
         Animatable.prototype.restart = function () {
             this._paused = false;
         };
+        Animatable.prototype._raiseOnAnimationEnd = function () {
+            if (this.onAnimationEnd) {
+                this.onAnimationEnd();
+            }
+            this.onAnimationEndObservable.notifyObservers(this);
+        };
         Animatable.prototype.stop = function (animationName) {
             if (animationName) {
                 var idx = this._scene._activeAnimatables.indexOf(this);
@@ -52832,9 +52842,7 @@ var BABYLON;
                     }
                     if (runtimeAnimations.length == 0) {
                         this._scene._activeAnimatables.splice(idx, 1);
-                        if (this.onAnimationEnd) {
-                            this.onAnimationEnd();
-                        }
+                        this._raiseOnAnimationEnd();
                     }
                 }
             }
@@ -52846,12 +52854,19 @@ var BABYLON;
                     for (var index = 0; index < runtimeAnimations.length; index++) {
                         runtimeAnimations[index].dispose();
                     }
-                    if (this.onAnimationEnd) {
-                        this.onAnimationEnd();
-                    }
+                    this._raiseOnAnimationEnd();
                 }
             }
         };
+        Animatable.prototype.waitAsync = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                _this.onAnimationEndObservable.add(function () {
+                    resolve(_this);
+                }, undefined, undefined, _this, true);
+            });
+        };
+        /** @hidden */
         Animatable.prototype._animate = function (delay) {
             if (this._paused) {
                 this.animationStarted = false;
@@ -52890,8 +52905,8 @@ var BABYLON;
                     runtimeAnimations[index].dispose();
                 }
             }
-            if (!running && this.onAnimationEnd) {
-                this.onAnimationEnd();
+            if (!running) {
+                this._raiseOnAnimationEnd();
                 this.onAnimationEnd = null;
             }
             return running;

dist/preview release/what's new.md

@@ -6,15 +6,16 @@
 
 ### Core Engine
 
-- Add the choice of [forming a closed loop](http://doc.babylonjs.com/how_to/how_to_use_curve3#catmull-rom-spline) to the catamull-rom-spline curve3 ([johnk](https://github.com/babylonjsguide))
-- Add support for specifying the center of rotation to textures ([bghgary](http://www.github.com/bghgary))
-- Add webVR support for Oculus Go ([TrevorDev](https://github.com/TrevorDev))
-- Add ability to not generate polynomials harmonics upon prefiltered texture creation ([sebavan](http://www.github.com/sebavan))
-- Add predicate function to customize the list of mesh included in the computation of bounding vectors in the ```getHierarchyBoundingVectors``` method ([sebavan](http://www.github.com/sebavan))
+- Added new `Animatable.waitAsync` function to use Promises with animations. Demo [Here](https://www.babylonjs-playground.com/#HZBCXR) ([Deltakosh](https://github.com/deltakosh)) 
+- Added the choice of [forming a closed loop](http://doc.babylonjs.com/how_to/how_to_use_curve3#catmull-rom-spline) to the catamull-rom-spline curve3 ([johnk](https://github.com/babylonjsguide))
+- Added support for specifying the center of rotation to textures ([bghgary](http://www.github.com/bghgary))
+- Added webVR support for Oculus Go ([TrevorDev](https://github.com/TrevorDev))
+- Added ability to not generate polynomials harmonics upon prefiltered texture creation ([sebavan](http://www.github.com/sebavan))
+- Added predicate function to customize the list of mesh included in the computation of bounding vectors in the ```getHierarchyBoundingVectors``` method ([sebavan](http://www.github.com/sebavan))
 
 ### glTF Loader
 
-- Add support for KHR_texture_transform ([bghgary](http://www.github.com/bghgary))
+- Added support for KHR_texture_transform ([bghgary](http://www.github.com/bghgary))
 
 ### Viewer
 
@@ -26,7 +27,7 @@
 
 ### Core Engine
 
-- Fix ```shadowEnabled``` property on lights. Shadows are not visble anymore when disabled ([sebavan](http://www.github.com/sebavan))
+- Fixed ```shadowEnabled``` property on lights. Shadows are not visble anymore when disabled ([sebavan](http://www.github.com/sebavan))
 - Physics `unregisterOnPhysicsCollide` didn't remove callback correctly [#4291](https://github.com/BabylonJS/Babylon.js/issues/4291) ([RaananW](https://github.com/RaananW))
 - Added missing getter and setter for global exposure in ColorCurves ([RaananW](https://github.com/RaananW))
 - Fixed an issue with view matrix when `ArcRotateCamera` was used with collisions ([Deltakosh](https://github.com/deltakosh)) 

src/Animations/babylon.animatable.ts

@@ -12,6 +12,11 @@
         public animationStarted = false;
 
         /**
+         * Observer raised when the animation ends
+         */
+        public onAnimationEndObservable = new Observable<Animatable>();
+
+        /**
          * Gets the root Animatable used to synchronize and normalize animations
          */
         public get syncRoot(): Animatable {
@@ -190,10 +195,16 @@
             this._paused = false;
         }
 
-        public stop(animationName?: string): void {
+        private _raiseOnAnimationEnd() {            
+            if (this.onAnimationEnd) {
+                this.onAnimationEnd();
+            }
 
-            if (animationName) {
+            this.onAnimationEndObservable.notifyObservers(this);
+        }
 
+        public stop(animationName?: string): void {
+            if (animationName) {
                 var idx = this._scene._activeAnimatables.indexOf(this);
 
                 if (idx > -1) {
@@ -211,10 +222,7 @@
 
                     if (runtimeAnimations.length == 0) {
                         this._scene._activeAnimatables.splice(idx, 1);
-
-                        if (this.onAnimationEnd) {
-                            this.onAnimationEnd();
-                        }
+                        this._raiseOnAnimationEnd();
                     }
                 }
 
@@ -230,14 +238,20 @@
                         runtimeAnimations[index].dispose();
                     }
 
-                    if (this.onAnimationEnd) {
-                        this.onAnimationEnd();
-                    }
+                    this._raiseOnAnimationEnd();
                 }
-
             }
         }
 
+        public waitAsync(): Promise<Animatable> {
+            return new Promise((resolve, reject) => {
+                this.onAnimationEndObservable.add(() => {
+                    resolve(this);
+                }, undefined, undefined, this, true);
+            });
+        }
+
+        /** @hidden */
         public _animate(delay: number): boolean {
             if (this._paused) {
                 this.animationStarted = false;
@@ -283,9 +297,10 @@
                 }
             }
 
-            if (!running && this.onAnimationEnd) {
-                this.onAnimationEnd();
-                this.onAnimationEnd = null;
+            if (!running) {
+                this._raiseOnAnimationEnd();
+                this.onAnimationEnd = null
+                this.onAnimationEndObservable.clear();
             }
 
             return running;