# Animation current frame

**URL:** <https://forum.babylonjs.com/t/animation-current-frame/27053>\
**Category:** Questions\
**Created:** [January 24, 2022, 8:33pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053 "2022-01-24T20:33:36Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 24, 2022, 8:33pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/1 "2022-01-24T20:33:36Z")

</div>

Hi there,

I’m trying to get control over my animations I’ve imported from blender.  
Just playing animations is already working here, but we 'd like to take it a bit further and give users control over various animations.  
At the moment I’ve managed to control the animation sequence based on my mouse position.

Now I’m looking to further get control over the animations using scroll.  
Is there a way to get the current frame in the animation (number)?

```auto
scene.animationGroups[1].goToFrame(scrllPos);

```

scrllPos is incremented on each scroll.

And it does work, however on a windows desktop pc the scroll isn’t the most fluently.  
I’d like to work on a scroll, when for ex you scroll three times fast after each other you initiate launching the animation which dims out over time. Unless you scroll again within a certain timeframe to spin up the animation again.  
Think of it as a car (the camera) on a predetermined track which you can sling forward, and which dims out over time.

Any help here is welcome!

Thanks  
Pieter

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [January 24, 2022, 8:40pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/2 "2022-01-24T20:40:26Z")

</div>

Going to bring in @carolhmj for this one

---

<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:** [January 24, 2022, 11:57pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/3 "2022-01-24T23:57:02Z")

</div>

> [@Pieter\_van\_Stee](#):
>
> Is there a way to get the current frame in the animation (number)?

You should be able to get it querying the `runtimeAnimation` of the animation ([Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/babylon.animation#runtimeanimations)) and accessing its `currentFrame` property ( [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/babylon.runtimeanimation#currentframe))

I think we can achieve this “dimming out” by using Easing Functions: [Advanced Animation Methods | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/animation/advanced_animations#easing-functions), possibly the cubic ease out: [Easing Functions Cheat Sheet](https://easings.net/#easeOutCubic)  
I prepared a simple example of this behavior, when you click the sphere we start an animation with the cubic out easing: [https://playground.babylonjs.com/#5JQPI1#1](https://playground.babylonjs.com/#5JQPI1#1) you can see the animation is “stronger” at the beginning then it gets weaker at the end 🙂

---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 25, 2022, 9:03am UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/4 "2022-01-25T09:03:29Z")

</div>

Hi @carolhmj

Thanks for the references and PG!  
I’m having difficulties getting the `runtimeAnimation`. This is a test-blender-file with 2 animations(?), however I just have 2 animationGroups which came in from the glb file (exported from blender).

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/1/e13cd04446e48a92e961d45cc5a672778c0de0bf.png)

So would it be possible to get the runtimeAnimation of these animation groups?

I also found this PG with the same approach, and with an interface and slider which displays the current animation frame: [https://playground.babylonjs.com/#68AHME#5](https://playground.babylonjs.com/#68AHME#5)

For the dimming out using the easing curves, is that also going to work with the animated objects?  
So would it be possible to animate an animation(group)? Could something like this work?

```auto
// just illustrative 
var ease = new CubicEase();
ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT);

var animationTorus = new Animation('animationAnimation', 'position', 30, Animation.ANIMATIONTYPE_VECTOR3, Animation.ANIMATIONLOOPMODE_CYCLE);
var anim = Animation.CreateAndStartAnimation('move', scene.animationGroups[0].goToFrame, 'goToFrame', 30, 30, 0, 150, Animation.ANIMATIONLOOPMODE_CONSTANT, ease);

```

So that you animate the animation to go from frame x, to frame y with an easing curve.  
That would be great, as I also would like to implement some kind of “snap” when nearing a certain frame number. So this could take over the scroll input and ease straight away to the predefined frame number with an animation.

Thanks!

---

<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:** [January 25, 2022, 1:38pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/5 "2022-01-25T13:38:46Z")

</div>

> [@Pieter\_van\_Stee](#):
>
> So would it be possible to get the runtimeAnimation of these animation groups?

It is, using the same idea as the PG you linked, you access the `targetedAnimations[i].animation.runtimeAnimations`.

> For the dimming out using the easing curves, is that also going to work with the animated objects?  
> So would it be possible to animate an animation(group)? Could something like this work?

I don’t quite understand this part here, you want the animation object to be also animated? If I understood that right, the AnimationGroup object is not animatable: [https://doc.babylonjs.com/typedoc/classes/babylon.animationgroup](https://doc.babylonjs.com/typedoc/classes/babylon.animationgroup), so that wouldn’t be possible. But you can set an easing function for each animation from the group, and start the group.

> That would be great, as I also would like to implement some kind of “snap” when nearing a certain frame number.

If the Cubic Ease doesn’t work for that, you could also try other, more customizable easing modes, like the Bezier Ease or even a custom ease: [Advanced Animation Methods | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/animation/advanced_animations#easing-functions)

---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 25, 2022, 4:13pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/6 "2022-01-25T16:13:48Z")

</div>

Thanks!

> [@carolhmj](#):
>
> It is, using the same idea as the PG you linked, you access the `targetedAnimations[i].animation.runtimeAnimations` .

With the following code I can get the current frame number which is playing.

```auto
scene.animationGroups[0].targetedAnimations[0].animation.runtimeAnimations[0].currentFrame

```

Indeed the approach about animating the animation is a bit confusing.  
So let’s rephrase, what I’m after is the following:

I have a predesigned camera following a path in Blender/3dsMax exported in a glb file.  
This camera (animated) comes along a few points of interest on the animated path (can be virtual, no stops, just a frame number).  
I managed to import and make us of this animated file in BJS.  
Depending on the scroll delta of your mouse I would like to initiate an animation of the camera.  
Let’s say we have an animation of 400 frames in blender, and we’ve landed in BJS on frame 120.  
When I scroll I’d like to initiate the camera animation forward 180 frames with an easing curve.

Here is a sketch about it:

 ![2022-01-25 17.09](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/1/7118a7777249940cd9eab66e2fa2b62001083429.jpeg)

Is that something that could be done?  
Thanks for the help in advance.  
Pieter

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [January 25, 2022, 5:00pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/7 "2022-01-25T17:00:07Z")

</div>

i think you could add a global variable that holds an ideal forward position or frame state that gets incremented when the user scrolls. also add an scene.registerBeforeRender callback that moves the camera or follow target some extra steps if the variable is greater than 0, and also decrement the variable by however much you moved. something like (pseudo code):

```auto
scrollBoost = 0
window.onscroll = () => scrollBoost + 100;

scene.registerBeforeRender(function () {
    if(scrollBoost > 0) {
         implmentationLogic()
        scrollBoost = scrollBoost - 20 (adjust speed and tweening here)
    }
  });

```

---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 25, 2022, 5:54pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/8 "2022-01-25T17:54:23Z")

</div>

Also I noticed that the “frame rate” from BJS is as follows:  
400 frames in blender at 24fps, correspond with 16.6666 (frames?) in BJS.  
So this `scene.animationGroups[0].targetedAnimations[0].animation.runtimeAnimations[0].currentFrame ` is more like the number of seconds that have passed by?

---

<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:** [January 25, 2022, 6:02pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/9 "2022-01-25T18:02:54Z")

</div>

The GLB format uses seconds instead of frames as its animation unit, so as to not assume anything about the original frame rate, when a GLB Animation is imported its converted to a 1fps animation. So frames ends up being the same as seconds. 🙂

---

<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:** [January 25, 2022, 6:03pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/10 "2022-01-25T18:03:00Z")

</div>



---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 25, 2022, 8:29pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/11 "2022-01-25T20:29:09Z")

</div>

Ok, I think I follow along here, but if this would have become a 1fps animation wouldn’t it have taken 400seconds? I’ve exported a 400 frame animation @24fps from blender to glb.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/d/8d55c813c4ec702dc5d1fc7bd77633417b8c482d.png)

In BJS the animation plays back for 16.6666 sec (at least that’s the duration (to) for the animation)

Another question about the animation. Could something like this work:

```auto
const ag = scene.animationGroups[0];
Animation.CreateAndStartAnimation('camAniMove', ag, 'goToFrame', 30, 120, 0, 8);

```

To animate the (animated) camera in order to tween it from frame 0 to 8. In this way I could play a subsection from the animation at a certain speed depending on some scroll parameters or so.  
At the moment this isn’t working for me yet…

However the following did work for me, but I couldn’t set the `from` goToFrame

```auto
gsap.gsap.fromTo(
    scene.animationGroups[0],
    2,
    { goToFrame: scrllPosStart },
    {
        goToFrame: scrllPos,
        // onComplete: () => {
        // console.log('done scrllPos', scrllPosStart, scrllPos);
        // console.log(scene.animationGroups[0].targetedAnimations[0].animation.runtimeAnimations[0].currentFrame);
        // },
        // ease: 'power3.out',
    },
);

```

Using gsap would limit our commercial possibilities in the future so I’m looking for another way to get this done. Like with `CreateAndStartAnimation` or `tweenjs` or so.

@jeremy-coleman thanks for the suggestion, however I couldn’t get your sample code to work for me here in this case. I’ll try again later and let you know if I got it to work.

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 25, 2022, 10:44pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/12 "2022-01-25T22:44:00Z")

</div>

> [@Pieter\_van\_Stee](#):
>
> Could something like this work:
> 
> ```auto
> const ag = scene.animationGroups[0];
> Animation.CreateAndStartAnimation('camAniMove', ag, 'goToFrame', 30, 120, 0, 8);
> 
> ```

That wont work because goToFrame is a function not a property, but you can wrap it in a property called currentFrame and animate that property with CreateAndStartAnimation for example, like below where I animate the frame of an imported model’s AnimationGroup. 🙂

> **[Babylon.js Playground](https://playground.babylonjs.com/#TQVD3X%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<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:** [January 25, 2022, 11:14pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/13 "2022-01-25T23:14:42Z")

</div>

> [@Pieter\_van\_Stee](#):
>
> In BJS the animation plays back for 16.6666 sec (at least that’s the duration (to) for the animation)

400 frames @ 24 fps =~ 16s in the GLB, when BJS loads this 16s animation it transforms it into a ~16 frames @ 1 fps animation so the duration is the same 😃

---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 25, 2022, 11:17pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/14 "2022-01-25T23:17:20Z")

</div>

Thank you very much @Blake  
Looks like a very good solution to this problem.

I was testing with tweenjs for the moment, which I got working quite nicely by now, but looks way more complex…

```auto
let camPosTime = { pos: 0 };
let nextInc = 4;
let reset = false;
let toFrame = nextInc;
let scrollMovement = false;

if (scrollMovement) {
    return;
}
let camMax = scene.animationGroups[0].to;
if (toFrame > camMax) {
    console.log('reset');
    toFrame = camMax;
    reset = true;
}
console.log(reset);
scrollMovement = true;
const camTween = new TWEEN.Tween(camPosTime)
    .to({ pos: toFrame })
    .duration(1600)
    .easing(TWEEN.Easing.Sinusoidal.InOut)
    .delay(0)
    .onUpdate(() => {
        // console.log(scene.animationGroups[0].targetedAnimations[0].animation.runtimeAnimations[0].currentFrame.toFixed(2));
        console.log(camPosTime.pos.toFixed(2));
        scene.animationGroups[0].goToFrame(camPosTime.pos);
    })
    .onComplete(() => {
        console.log('done');
        if (reset === true) {
            camPosTime.pos = 0;
            toFrame = nextInc;
            reset = false;
        } else {
            toFrame += nextInc;
        }
        scrollMovement = false;
    })
    .start();

```

It does what it should, but I’ll definitely try your solution tomorrow.  
Thanks

---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 25, 2022, 11:18pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/15 "2022-01-25T23:18:15Z")

</div>

ok 🙂 when you look at it like that it does make sense 😛  
thanks

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 25, 2022, 11:34pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/16 "2022-01-25T23:34:57Z")

</div>

LOL `animationGroup.currentFrame` is **so** much easier to remember and type out than `animationGroup.targetedAnimations[0]?.animation.runtimeAnimations[0]?.currentFrame`. Would make a good PR I guess to add a “currentFrame” property to AnimationGroup? 🙂

EDIT: or are the group’s animations not necessarily always normalized to have the same number of frames and always be at the same frame? I thought they were but now I’m not sure. 🤔

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 26, 2022, 12:24am UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/17 "2022-01-26T00:24:06Z")

</div>

Yep they are not necessarily ☹

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 26, 2022, 12:57am UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/18 "2022-01-26T00:57:55Z")

</div>

Aah well, I suppose a generalized solution would be more complicated then, like returning the max currentFrame of all the runtimeAnimations or something… 🙁 🤔

---

<div class="post-metadata">

**Author:** ![Pieter\_van\_Stee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter_van_stee/32/20145_2.png) [@Pieter\_van\_Stee](https://forum.babylonjs.com/u/Pieter_van_Stee)\
**Post date:** [January 26, 2022, 11:40am UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/19 "2022-01-26T11:40:11Z")

</div>

> [@Blake](#):
>
> LOL `animationGroup.currentFrame` is **so** much easier to remember and type out than `animationGroup.targetedAnimations[0]?.animation.runtimeAnimations[0]?.currentFrame` . Would make a good PR I guess to add a “currentFrame” property to AnimationGroup? 🙂

Good point, but if there is a possibility that there are different currentFrame values within, it’s better to write a custom function to shorten this.

What was mainly a bit frustrating is having to look for this which made it quite a task 😛

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 26, 2022, 6:11pm UTC](https://forum.babylonjs.com/t/animation-current-frame/27053/21 "2022-01-26T18:11:15Z")

</div>

Yep, that’s what I meant by using the max currentFrame instead… And def agree it’s frustrating to have to deduce or find/lookup a long, complicated way to get the current frame… 🙂

[Next page](https://forum.babylonjs.com/t/animation-current-frame/27053.md?page=2)