Appear/Disappear animation

Howdy!
In short, my question is how to animate something where it appears to suddenly pop-in to a place, and then disappear. Even putting keyframes right next to each other, Babylon appears to tween the animation, whereas in my mind, if frame 10 had position.x = 5 and frame 11 had position.x = 0, there would be no animation in-between the frames.

Here’s an example of what I think should do this, because the keyframes are adjacent to each other.
https://www.babylonjs-playground.com/#04J0U3

Is there a way to achieve what I want? And yes, it has to be an animation…and the reason is a follow up to a previous question I had.

The long version is that I want to animate vertices on a mesh and export to GLTF. As GLTF doesn’t support vertex animation and I’d have too many morph targets for a GLTF file, I got the idea to go simple and dumb. Basically create a sprite sheet of sorts with my cloned meshes. Create an animation where one mesh will appear in place, and then the next, and then the next. Yes, I’m aware that BJS GLTF export doesn’t support animation yet, but one problem at a time :slight_smile:

thanks!

Using animation groups should help https://www.babylonjs-playground.com/#04J0U3#2.

You will need to play with key frames to get the timings you want.

1 Like

Awesome thanks! I think you slightly misunderstood, but nevertheless I got what I was looking for. I was only using position.x as a stand-in because the visibility prop was tweening in the same way. I didn’t know that “isVisible” was a animatable property, and given it’s boolean nature, it’s exactly what I was looking for.

So to follow up, doing this works fantastic in my realtime BJS project. Unfortunately, when I send it to the GLTF exporter, I get messaging saying that isVisible isn’t an animatable property.

I know that animation isn’t supported yet in the exporter, but this seems like a red flag to me that this property won’t be supported once this work is complete.

Any idea on what I can expect? If I’m correct, and it’s not supported, any advice on how to accomplish this, as non-boolean properties seem to create more of a tweening effect?
thanks again!

I also may stand corrected on animation not being supported, because if I switch to a property like position.x, I am seeing animation in Blender from the GLTF output (which is AWESOME!).

Now just to figure out how to accomplish this sprite sheet behavior with a supported property.
thanks

Just to follow up, I got something that works in the playground, and it’ll hopefully be fine for my actual project. I had to try some things contrary to some assumptions (and I’m still not sure why it works I).

I had initially assumed that assigning an “off” position for it to pop back on in the next frame, the most fidelity I could go with the time was the framerate itself. So when I wanted it hidden on frame 15, for example, the last relevant frame I should keep it visible was frame 15 minus the framerate. Even doing frame 15 minus 1 (14) was insufficient and still produced motion. I started subtracting smaller and smaller fractions in this way and eventually landed on framerate/256.

Again, I’m not exactly sure why it works, but it seems to! I’m keyframing scaling now, where 0 scale is hidden and shown is full scale.
Even though I know I’ve been talking to myself for most of this, I much appreciate the help!

https://www.babylonjs-playground.com/#04J0U3#4

1 Like

Best feeling ever:D

1 Like

And you are not talking to yourself as this definitely can help others:)

You can do it more easily with no hack this way:

https://www.babylonjs-playground.com/#04J0U3#5

Just set the interpolation property of the keys to STEP so that no interpolation occurs between keys.

1 Like

Ohhhh, even better. I was looking for how to set interpolation in the docs, and could only find setting custom functions (which I KNOW won’t be supported by GLTF). Anyway, I’ve had some success in getting this rendering in Blender, but it’s not perfect - I think interpolation will help immensely. Thanks!

I know, hehe, it’s why I continue talking to myself. :slight_smile:

1 Like