The canvas is your primary workspace in Lottie Creator. It is where you design, edit, and preview your animation visually. The viewport controls what portion of the canvas you are looking at and how zoomed in you are.

What is the canvas

The canvas is the rectangular area that displays your animation scene. You use it to:

•View and edit layers visually
•Draw shapes and paths
•Position and transform elements
•Preview animation playback
•Interact directly with layer content

The canvas works alongside the timeline:

•The canvas controls spatial layout
•The timeline controls time and keyframes

Both views are always connected.

Scene size and coordinates

The canvas displays your scene at a defined size.

•Default scene size is 512 by 512 pixels
•Scene size is set in scene settings
•Zoom does not change the scene size

Coordinate system:

•Origin 0,0 is at the top left
•X increases to the right
•Y increases downward

This matches standard screen and web coordinates.

Zooming the canvas

Zoom changes how large your scene appears in the viewport. It does not affect the animation itself.

Common zoom levels:

•Below 100 percent shows more of the scene
•100 percent shows actual pixel size
•Above 100 percent shows more detail

Ways to zoom:

•Keyboard shortcuts
•Zoom menu in the toolbar
•Mouse wheel or trackpad gestures (ctrl/cmd + scroll)

Essential shortcuts:

•Cmd or Ctrl + Plus to zoom in
•Cmd or Ctrl + Minus to zoom out
•Cmd or Ctrl + 0 for 100 percent
•Cmd or Ctrl + 1 to fit the scene to the viewport

Panning the canvas

Panning moves the viewport without changing zoom.

•Drag using mouse scroll wheel click
•Select the Hand Tool with H or from the toolbar, click and drag
•Pan using a trackpad

Canvas display options

You can adjust how the canvas looks without affecting export.

Options include:

•Background color
•Transparency checkerboard for alpha preview
•Scene bounds outline

The scene bounds show the edges of your animation. Content outside these bounds may be clipped on export.