HowTo: show an animation frame according to mouse position

I am using the following code but the animation play in full when triggered

arrow_pull is properly set in a listener with values from 0 to 35 according to mouse move. Then:

scene.onBeforeRenderObservable.add(function() {
var arch = scene.getMeshByName(“Arch2”);
if (arch != null) {
// process state machine
if (state == PULLING) {
if (Math.round(last_arrow_pull) != Math.round(arrow_pull) ) {
var int_val = Math.round( arrow_pull );
console.log("animate frame = " + int_val);
scene.beginAnimation(arch, int_val, int_val, false, 1.0); // it does not work
last_arrow_pull = arrow_pull;


Hi V! I think you are attempting animation “timeline scrubbing”, and, as far as I know, this is not supported in BabylonJS. I have never seen any demos that allow it. BJS value-interpolation methods are not designed to be used in this way, as far as I know.

Stay tuned for more comments/validations/ideas, but I think I am correct, and sorry for this bad news.

Hey, you need to get the animatable out of the beginAnimation call and use goToFrame

Example in the sandbox (using animation group): Babylon.js/animation.js at master · BabylonJS/Babylon.js · GitHub

For regular animation it should look like;

var animatable = scene.beginAnimation...

1 Like