How to Use Animation X-Sheet

Master the art of animation timing with our comprehensive guide

Getting Started

Animation X-Sheet is a powerful web-based tool for creating professional animation timing sheets. This guide will walk you through every feature and help you create your first timing sheet.

Opening the Tool

  1. Download the Animation X-Sheet from our download page
  2. Extract the files to a folder on your computer
  3. Open the index.html file in a modern web browser
  4. Allow any browser permissions for file access when prompted

Project Management

The Animation X-Sheet includes a powerful project management system to keep your work organized.

Creating a New Project

  1. Click the "Create Project" button in the header
  2. Select or create a folder where your project will be stored
  3. The tool will automatically create subfolders:
    • scenes/ - For your timing sheet files
    • audio/ - For your audio files
    • exports/ - For your exported PDFs
  4. Your project status will update to show the project folder name

Setting an Existing Project

  1. Click "Set Project" to use an existing project folder
  2. Select a folder that contains your project structure
  3. Missing subfolders will be created automatically

Basic Setup

Before diving into timing, set up your project parameters.

Project Metadata

Fill in the metadata fields at the top of the workspace:

  • Project #: Your project identifier
  • Date: Production date
  • Animator: Your name or team
  • Version: Version number (defaults to 1.0)
  • Shot #: Scene or shot identifier

Timing Settings

  • Frames: Set the total number of frames for your animation
  • FPS: Set your frame rate (24fps is standard for film, 30fps for TV/web)

Audio Workflow

Audio synchronization is one of the most powerful features of Animation X-Sheet.

Importing Audio

  1. Click "Import Audio" in the header
  2. If you have a project set up, choose audio from your project's audio folder or import new audio
  3. Supported formats: MP3, WAV, OGG, M4A, AAC, FLAC
  4. The audio waveform will appear in the dedicated waveform column
  5. Frame count will automatically adjust to match audio duration

Audio Playback

  • Play/Pause: Control audio playback
  • Stop: Stop playback and return to beginning
  • Scrub Slider: Drag to jump to specific positions
  • Waveform Scrubbing: Click and drag on the waveform for precise positioning

Waveform Features

  • Visual Timing: See audio peaks and valleys for precise timing
  • Vertical Scrubbing: Click and drag vertically on the waveform to scrub audio
  • Frame Highlighting: Current playback position highlights the corresponding frame
  • Pen/Stylus Support: Enhanced precision when using a drawing tablet

Working with the Timing Sheet

The timing sheet is the heart of your animation planning.

Understanding Columns

  • Action/Description: Main action happening in the frame
  • Fr (Frame Number): Auto-numbered frames
  • Audio Waveform: Visual representation of your audio
  • Dialogue: Dialogue or voice-over notes
  • Sound FX: Sound effects timing
  • Tech. Notes: Technical animation notes
  • Extra Columns: Three customizable columns for your workflow
  • Camera Moves: Camera movement and positioning notes

Customizing Columns

  1. Right-click on any column header with a pencil icon (✏️)
  2. Select "Rename Column" from the context menu
  3. Enter your custom name (e.g., "Lip Sync", "Effects", "Props")
  4. Select "Reset to Default" to restore original names

Editing Cells

  • Click on any editable cell to start typing
  • Tab to move to the next cell
  • Enter to move to the cell below
  • Text is automatically saved as you type

Frame Indicators

  • Second Marks: Bold lines every 24 frames (at 24fps)
  • Eighth Marks: Dashed lines every 8 frames
  • Frame 1: Highlighted in green as the start frame
  • Current Frame: Highlighted in blue during audio playback

Drawing Tools

Add visual notes and sketches directly to your timing sheet.

Tool Selection

Choose from the toolbar on the left:

  • Select Tool (👆): Default navigation tool
  • Pen Tool (✏️): Freehand drawing
  • Line Tool (—): Straight lines
  • Rectangle Tool (□): Rectangular shapes
  • Ellipse Tool (○): Circular and oval shapes
  • Eraser Tool (🧽): Remove drawings

Drawing Options

  • Color: Choose drawing color from the color picker
  • Line Width: Select from 1px to 5px thickness
  • Clear All: Remove all drawings (with confirmation)

Pen/Stylus Support

  • Pressure Sensitivity: Automatically adjusts line width based on pen pressure
  • Palm Rejection: Ignores large contact areas (palm touches)
  • Hover Preview: Visual feedback when pen hovers over drawing area
  • Enhanced Precision: Optimized for professional drawing tablets

Saving and Loading

Preserve your work and collaborate with team members.

Saving Scenes

  1. Click "Save Scene" in the header
  2. With a project folder set up, choose a filename in your scenes folder
  3. Files are saved in JSON format for easy version control
  4. Auto-versioning prevents accidental overwrites

Loading Scenes

  1. Click "Load Scene" in the header
  2. Select a JSON file from your scenes folder
  3. Associated audio files will be loaded automatically if found
  4. All drawings, timing data, and settings are restored

Exporting Your Work

Create professional PDF timing sheets for production use.

PDF Export

  1. Click "Export PDF" in the header
  2. The tool automatically captures your entire timing sheet
  3. Multi-page PDFs are created for long animations
  4. With a project folder, PDFs are automatically saved to the exports folder
  5. Auto-versioning prevents overwriting previous exports

Export Features

  • High Quality: Vector-based output for crisp printing
  • Complete Content: Includes all drawings, waveforms, and text
  • Professional Layout: Optimized for standard paper sizes
  • Page Numbers: Automatic pagination for multi-page documents
  • Metadata Included: Project information appears on each sheet

Tips and Tricks

Master techniques for efficient timing sheet creation.

Workflow Tips

  • Start with Audio: Import your audio track first to establish timing
  • Use Frame Markers: Mark key poses and beats before detailed timing
  • Color Coding: Use different drawing colors for different types of notes
  • Layer Information: Use multiple columns to separate different aspects
  • Save Frequently: Use the project system to save iterations

Collaboration Tips

  • Version Control: JSON files work well with Git for team collaboration
  • Shared Folders: Use cloud storage for project folders
  • Naming Conventions: Establish consistent file naming for scenes
  • Export Standards: Create PDF exports for review and approval

Efficiency Tips

  • Keyboard Shortcuts: Use Tab and Enter for quick cell navigation
  • Audio Scrubbing: Use vertical waveform scrubbing for precise timing
  • Column Customization: Rename columns to match your workflow
  • Drawing Layers: Use drawing tools for quick visual references

Common Issues

Solutions to frequently encountered problems.

Audio Issues

  • Audio Won't Play: Check browser permissions and audio format
  • No Waveform: Ensure audio file is properly loaded and supported
  • Sync Issues: Verify frame rate matches your audio's intended playback

Performance Issues

  • Slow Drawing: Reduce line width or clear unnecessary drawings
  • Large Files: Break long animations into multiple scenes
  • Browser Issues: Use Chrome, Firefox, or Safari for best performance

File Issues

  • Can't Save: Ensure you have write permissions to the target folder
  • Project Folder Issues: Check if the File System Access API is supported
  • Export Problems: Clear browser cache and try again

Next Steps

Now that you understand the basics, explore advanced features:

  • Experiment with different drawing tools and colors
  • Try complex timing with multiple audio tracks
  • Set up team workflows with shared project folders
  • Explore the open-source code for customization opportunities

For additional help, visit our Help section or join the community discussions on GitHub.