# this\_1.\_scene.beginDirectAnimation is not function

**URL:** <https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675>\
**Category:** Questions\
**Created:** [August 1, 2022, 9:46am UTC](https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675 "2022-08-01T09:46:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![seenyea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/seenyea/32/25951_2.png) [@seenyea](https://forum.babylonjs.com/u/seenyea)\
**Post date:** [August 1, 2022, 9:46am UTC](https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675/1 "2022-08-01T09:46:06Z")

</div>

the problem code about babylonjs in the _ **animationGroup.js** _ file, the method is _ **AnimationGroup.prototype.start** _.

```auto
 var _loop_1 = function (index) {
            var targetedAnimation = this_1._targetedAnimations[index];
            var animatable =this_1._scene.beginDirectAnimation(targetedAnimation.target, [targetedAnimation.animation], from !== undefined ? from : this_1._from, to !== undefined ? to : this_1._to, loop, speedRatio, undefined, undefined, isAdditive !== undefined ? isAdditive : this_1._isAdditive);
            animatable.onAnimationEnd = function () {
                _this.onAnimationEndObservable.notifyObservers(targetedAnimation);
                _this._checkAnimationGroupEnded(animatable);
            };
            _this._processLoop(animatable, targetedAnimation, index);
            _this._animatables.push(animatable);
            
        };

```

I have pasted all my codes below:

ts file

```auto
import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";

import { SceneLoader } from "@babylonjs/core/Loading";
import "@babylonjs/loaders"
import "@babylonjs/core/Loading/Plugins/babylonFileLoader"
import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import "@babylonjs/core/Collisions/collisionCoordinator";
import { Color3 } from "@babylonjs/core/Maths/math.color";

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const engine = new Engine(canvas, true);

    // Scene and Camera
    var scene = new Scene(engine);

    var camera1 = new ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 10, new Vector3(0, -5, 0), scene);
    scene.activeCamera = camera1;
    scene.activeCamera.attachControl(canvas, true);
    camera1.lowerRadiusLimit = 2;
    camera1.upperRadiusLimit = 10;
    camera1.wheelDeltaPercentage = 0.01;

    // Lights
    var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.intensity = 0.6;
    light.specular = Color3.Black();

SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "HVGirl.glb", scene).then((result) => {
    var hero: any = result.meshes[0];       
        hero.scaling.scaleInPlace(1);
});

engine.runRenderLoop(() => {
    scene.render();
});

```

tsconfig.json

```auto
{
	"compilerOptions": {
        "module": "esnext",
		"target": "es5",
		"moduleResolution": "node",
		"strict": true,
		"noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "strictFunctionTypes": false,
        "skipLibCheck": true,
		"preserveConstEnums":true,
        "sourceMap": true,
        "rootDir": "src"
	}
}

```

package.json

```auto
{
  "name": "zha",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babylonjs/core": "^5.15.1",
    "@babylonjs/loaders": "^5.16.0",
    "@babylonjs/materials": "^5.15.1",
    "@types/earcut": "^2.1.1",
    "babylonjs-gui": "^5.16.0",
    "babylonjs-loaders": "^5.16.0",
    "babylonjs-viewer": "^5.16.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "earcut": "^2.2.4",
    "earcut-typescript": "^2.2.3",
    "html-webpack-plugin": "^5.5.0",
    "source-map-loader": "^4.0.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

```

webpac.config.js

```auto
const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

// App directory
const appDirectory = fs.realpathSync(process.cwd());

module.exports = {
    entry: path.resolve(appDirectory, "src/index.ts"),
    output: {
        filename: "js/babylonBundle.js",
        path: path.resolve("./dist/"),
    },
    devtool: "eval-source-map",
    mode:"development",
    devServer: {
        static: {
          directory: path.resolve(appDirectory, "public"),
        },
        compress: true,
        port: 9000,
    },
    resolve: {
        extensions: [".ts", ".js"],
        fallback: {
            fs: false,
            path: false, // require.resolve("path-browserify")
        },
    },
    module: {
        rules: [
            {
                test: /\.m?js/,
            },
            {
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                loader: "source-map-loader",
                enforce: "pre",
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                // sideEffects: true
            },
            {
                test: /\.(png|jpg|gif|env|glb|gltf|stl)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            inject: true,
            template: path.resolve(appDirectory, "public/index.html"),
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, './public/'),
                    to: path.resolve(__dirname, './dist/public'),
                }
            ]
        })
    ],
};

```

---

<div class="post-metadata">

**Author:** ![seenyea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/seenyea/32/25951_2.png) [@seenyea](https://forum.babylonjs.com/u/seenyea)\
**Post date:** [August 1, 2022, 9:50am UTC](https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675/2 "2022-08-01T09:50:01Z")

</div>

here are sample code

[demo.zip](https://forum.babylonjs.com/uploads/short-url/9uI7N2jErI1RwLYtWEwrz8n2vnf.zip) (4.4 MB)

by the way, I wanna make a ES6 demo by babylonjs.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [August 1, 2022, 12:07pm UTC](https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675/3 "2022-08-01T12:07:54Z")

</div>

cc @RaananW

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 1, 2022, 12:16pm UTC](https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675/4 "2022-08-01T12:16:42Z")

</div>

You will need to add an import to `animatable`:

`import "@babylonjs/core/Animations/animatable"`

It is explained right here - [Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#faq)

---

<div class="post-metadata">

**Author:** ![seenyea](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/seenyea/32/25951_2.png) [@seenyea](https://forum.babylonjs.com/u/seenyea)\
**Post date:** [August 2, 2022, 6:44am UTC](https://forum.babylonjs.com/t/this-1-scene-begindirectanimation-is-not-function/32675/5 "2022-08-02T06:44:27Z")

</div>

thanks