# Best way to do stepped (non interpolated) animation?

**URL:** <https://forum.babylonjs.com/t/best-way-to-do-stepped-non-interpolated-animation/8763>\
**Category:** Questions\
**Created:** [February 24, 2020, 8:41pm UTC](https://forum.babylonjs.com/t/best-way-to-do-stepped-non-interpolated-animation/8763 "2020-02-24T20:41:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [February 24, 2020, 8:41pm UTC](https://forum.babylonjs.com/t/best-way-to-do-stepped-non-interpolated-animation/8763/1 "2020-02-24T20:41:52Z")

</div>

Currently I’m using setInterval to make object changes at fixed intervals e.g. like say toggling a light on and off, but I was wondering if the Animation classes can somehow be used to do the same thing, just without any interpolation between key frames?

Using setInterval I strangely ended up with some timing glitches, like other processes were interferring and causing the intervals not to be consistent. I see in the Sprite code that a delta time check is being used in a render method, not setInterval. Is this the best approach or can the Animation classes be used without interpolation?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [February 25, 2020, 12:27am UTC](https://forum.babylonjs.com/t/best-way-to-do-stepped-non-interpolated-animation/8763/2 "2020-02-25T00:27:15Z")

</div>

> [@inteja](#):
>
> I was wondering if the Animation classes can somehow be used to do the same thing, just without any interpolation between key frames?

This may prove useful for you to look at [https://doc.babylonjs.com/how\_to/sequence](https://doc.babylonjs.com/how_to/sequence)

In particular the sweep\_keys for the door. Frames 0 to 3\*frame rate all have value 0 hence no interpolation. Careful use of constant values over set key frames can give you non interpolated intervals

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [February 25, 2020, 12:33am UTC](https://forum.babylonjs.com/t/best-way-to-do-stepped-non-interpolated-animation/8763/3 "2020-02-25T00:33:41Z")

</div>

Thanks @JohnK

---

<div class="post-metadata">

**Author:** ![reimund](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/reimund/32/7309_2.png) [@reimund](https://forum.babylonjs.com/u/reimund)\
**Post date:** [January 30, 2025, 1:38pm UTC](https://forum.babylonjs.com/t/best-way-to-do-stepped-non-interpolated-animation/8763/4 "2025-01-30T13:38:37Z")

</div>

Since I came across this post when trying to do something similar I’m adding my playground here in case anyone finds it interesting.

> **[Babylon.js Playground](https://playground.babylonjs.com/#8ZMANP%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

In this playground I’m syncing animation with a video using `requestVideoFrameCallback`.

One issue remains where the initial canvas gets distorted for some reason when `engine._renderViews()` is called. I do not quite get what’s happening yet.

Anyway, the stepped animation part works.