All projects
BabylonJS

Combining Animations on ReadyPlayerMe Characters — BabylonJS

How to layer and blend multiple AnimationGroups on a ReadyPlayerMe avatar in BabylonJS. Walk cycle + upper body wave + facial expression, all simultaneously.

By default, starting a second AnimationGroup stops the first — they fight over the same bone transforms. This demo shows how to play walk + wave + talking simultaneously on a ReadyPlayerMe avatar.

The technique

Clone each animation group and remove targetedAnimations for bones you don't want it to control. Walk drives lower body only, wave drives upper body only, talking drives jaw/face only. Each group runs independently with no conflicts.

Transitions between states use setWeightForAllAnimatables() lerped over time on each RAF.

Animations source

Uses the ReadyPlayerMe animation library, converted from FBX to GLB via the FBX2GLB batch tool.

RPM export requirements

  • T-pose as frame 0 (reference frame for blending)
  • All clips in a single GLB
  • Standard Mixamo bone naming

Common issue

Hands snapping = two groups both targeting LeftHand with no masking. Bone-name filtering in the mask prevents this. Cleaner alternative when you control the asset: export separate clips per body region from the DCC tool.

Built by

Viseni Design Studio

3D, WebGL, interactive & VR/AR experiences

Visit viseni.com