Importing model inbuilt animations and play/pause them

Questions
1

I have imported a glb file with animations in Babylon.js scene . I need to find out how many animations are present in the model and arrange them in a sequence. How can I know this without opening the model in blender or sandbox. Does Babylon give us something like animations and then I can access it as animations[0],animations[1] and so on.
Also I want to know the animationTime so that can move an HTML slider thumb accordingly.

  <script>
       
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        var createScene = function() {
        var scene = new BABYLON.Scene(engine);

        // Add a camera to the scene and attach it to the canvas
        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
        camera.attachControl(canvas, true);

        // Add a lights to the scene
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

        //Your Code
        //var model = BABYLON.SceneLoader.ImportMeshAsync("", "Animation/", "Bee.glb", scene);

        // Load hero character and play animation
        BABYLON.SceneLoader.ImportMesh("", "Animation/", "Bee.glb", scene, function (newMeshes, particleSystems, skeletons, animationGroups) {
            var hero = newMeshes[0];

            //Scale the model down        
            hero.scaling.scaleInPlace(0.1);

            //Lock camera on the character 
            camera.target = hero;
            
        });

        return scene;
        };

        const scene = createScene(); //Call the createScene function
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });


        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>
2

On glbs animationGroups should provide just that .

3

@sebavan Right…Got it. Thanks!!
I got the total runtime of the animation clip from ‘_to’ property.And I set the slider max value to this time. Now I want to know the currentTime of animation after it starts playing. So that I can the slider thumb value accordingly. Please guide me through this.

4

I am not entirely sure what you are trying to do.

Maybe a repro in the playground would help the overall community to jump in ?

5

JS Fiddle
Will this work?

I am basically trying to create a HTML slider(input type=range) and sync it with the gltf animation. User can move the slider and the animation should sync accordingly.

The code works partially. Setting masterFrame according to sliderValue is giving problems. masterFrame is set but then the animation stops playing.

6

You should have a look at what we do in the sandbox for this: Babylon.js/animationBar.tsx at master · BabylonJS/Babylon.js · GitHub

This is how we handle the animation slider there.

7

Thanks !! Will look at it.
Also when I zoom in and out on gltf model, my enitre page zooms in and out( & not like the Ctrl++) My HTML elements are not inside canvas then why do they zoom.
I have written meta tag to disable scaling.