Is it possible to create variations within an animation loop?

Hello fellow Babylon developers.

Playground link:

I have a plane mesh which I want to animate from xStart to xEnd
(note: xStart and xEnd not the actual names of variable just used for simplicity).

The function responsible for the animation I called “_layerLoop”

Every time the mesh reaches xEnd I want it to re-appear at xStart but I want the mesh’s z & y coordinates to be different - I want them re-rolled based on the coordinate limits specified by the input parameters.

Currently the only way to produce a variation in y and z coordinates using the existing playground example, is to refresh the page.

I have explored the document on observing events but was unable to achieve the desired outcome.

Is it possible to get the mesh to appear at different y & x coordinates every time the animation loops?

Any help is very much appreciated.

Thank you for your time.

What about using animatable.onAnimationLoopObservable?

lgg-loop-debug | Babylon.js Playground (

1 Like

@Deltakosh thank you for the solution and the speedy response!

You can see from the commented out code at the end of _layerLoop() that I tried to implement observables before, but was clearly not implementing them properly.

For anyone who may run into the same issue

I feel like this was the missing link for me:
var animatable = scene.beginAnimation(plane, 0, durRoll, true);
animatable.onAnimationLoopObservable.add(() => {…})

Since Googling things like “onAnimationLoopObservable babylonJS” yielded only examples with group animations, I wasn’t sure how to translate it to a single animation.

Such a simple solution, I feel silly That I even asked the question, but I hope this helps other out in the future.


1 Like

Thanks for sharing your learnings to others @bEZ358 !