How to Combine 2 Animations in Single Scene

I cannot seem to add animation to this scene (swivel until you find sphere, then click on it):

like this: Babylon.js Playground

I want to add the following animation onto each sphere after zoom motion stops (click sphere):

like this: Babylon.js Playground

the animations seem to collide when i combine them - either the ZOOM is broken or the menu is broken. I think there needs to be 2 separate events for the button press but I can’t figure out how to combine the animations in a single scene.

Could you place your example in the playground ? I can not seem to be allowed to connect to your server :slight_smile:

I updated entire description of problem with playground links.

Your last playground example is broken :upside_down_face:
image

But from your problem description, it sounds like you just need a variable to keep track of the sphere’s state: either the zoom animation has not run, in which case once its clicked, the zoom animation should start, and once the animation finishes, the next time the sphere is clicked then you play the menu animation. This kind of behavior is an example of the State Machine design pattern, which is very useful for game development, animation, etc: State (refactoring.guru)

I put together a very simple example of this idea, using only a variable to keep track of the sphere’s current state, and changing it when the determined animation ends: Sphere Sequenced Animations | Babylon.js Playground (babylonjs.com)

Ok that makes sense (State machine). I was thinking of clearing the event and resetting somehow, but I can see the method. I made a similar change to the playground to use your deform example. Thanks!