Animate Three.js with Motion

Motion's animate() can drive Three.js animations:

Object3D transforms: x, y, z, rotateX, rotateY, rotateZ, scale etc
Material properties, including via CSS colour strings
Vector2, Vector3 and Vector4 axes
ShaderMaterial uniforms
TSL uniform() nodes

Because this is the same animate() that animates the DOM, Three.js objects, shader uniforms etc can be animated within sequences and stagger alongside HTML and SVG elements.

Three.jsOpen example

It works with OrbitCamera, enabling the creation of direct control with a smooth crossfade back to constant orbit, without the heavy feeling of Three's in-built damping.

Three.js OrbitControlsOpen example

It also works with the new TSL APIs.

Three.js TSL particle morphOpen example

Motion is supported by the community