Motion Lab is a browser-based workspace for generative visuals and animation. A composition brings together visual layers, a timeline, project settings, and an export workflow.
Choose your starting point
- Learn by making: follow Create a looping animation with JavaScript. You will create a complete animation from a code layer.
- Finish an existing project: follow Export an animation.
- Look up a method: use the Drawing API basics reference for the methods used in the tutorial.
- Understand the motion: read Timeline time and loops.
Find your way around
Layers contain the visual elements in your composition. Select a layer before changing its properties. A hidden layer will not appear in the result; a locked layer cannot be edited until it is unlocked.
The timeline controls when a layer appears. Moving the playhead lets you inspect a particular moment. Playback advances through the composition so you can check the motion.
Project settings determine the composition's dimensions, aspect ratio, and duration. Choose these before fine-tuning your design, especially when your drawing uses coordinates relative to the frame.
Export renders the composition to a downloadable file. You can use your project settings to keep the preview and output consistent.
Try a code layer
Open an editable project in Motion Lab. In Layers, choose Code, then select the new layer to edit its source. Keep its clip visible across the composition's timeline.
Code layers use a provided motion object. They are not ordinary website scripts: the editor supplies drawing methods and timeline values for your animation.
Start with the looping animation tutorial. It includes complete examples and expected results at each step.
When something looks wrong
Check that the layer is visible, the playhead is inside its clip, and the editor shows no code errors. If the image is still, start playback. If a circular path looks stretched, check the project aspect ratio.
For export-specific problems, see Export an animation.