Onion Skinning
Onion skinning displays semi-transparent overlays of neighboring frames, helping you create smooth animations by seeing where objects were and where they're going.
What is Onion Skinning?
The term "onion skinning" comes from traditional animation, where animators would stack thin, translucent paper (like onion skin) to see multiple frames at once.
In ASCII Motion, onion skinning shows:
- Previous frames in blue tint
- Next frames in red tint
This helps you maintain consistent motion and spacing between frames.
Enabling Onion Skinning
Toggle On/Off
Visual Indicators
When enabled, you'll see:
| Color | Meaning |
|---|---|
| Blue (#3B82F6) | Previous frame(s) |
| Red (#EF4444) | Next frame(s) |
| Full color | Current frame (your active drawing) |
Configuration
Number of Frames
Control how many neighboring frames to display:
- Previous frames - How many frames before current to show
- Next frames - How many frames after current to show
Default is 1 frame in each direction. Increase for complex animations.
Opacity Settings
Adjust the transparency of onion skin overlays:
- Higher opacity = more visible ghost frames
- Lower opacity = less distraction from current frame
- Each successive frame is progressively more transparent
Smart Playback Behavior
Onion skinning automatically disables during playback to show your animation clearly, then re-enables when you pause.
This smart behavior means:
- Press Space to play → onion skins hide
- Press Space to pause → onion skins return
- No need to manually toggle during preview
Use Cases
Smooth Motion
When animating movement:
- Enable onion skinning (Shift+O)
- Draw the first pose
- Add new frame, see previous in blue
- Position next pose relative to blue ghost
- Repeat for full cycle
- Preview to check smoothness
Lip Sync Animation
For character dialogue:
- Previous frame shows last mouth shape
- Current frame is your active drawing
- Helps maintain face consistency
Loop Continuity
For seamless loops:
- Navigate to first frame
- Show "next" frames including the last frame
- Ensure first and last frames connect smoothly
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Shift+O | Toggle onion skinning on/off |
Technical Details
Onion skinning uses canvas-based rendering with LRU caching for performance. Even complex animations render smoothly.
Performance Optimization
The system is optimized for:
- Quick frame switching
- Minimal memory usage via smart caching
- Smooth redraw even with many visible frames
Color Coding Rationale
- Blue = Past - Cool colors recede, representing what's behind
- Red = Future - Warm colors advance, representing what's ahead
- Industry-standard convention used in professional animation tools
Tips & Best Practices
When to Use Onion Skinning
✅ Ideal for:
- Character animation
- Motion paths
- Timing adjustments
- Loop creation
❌ Less useful for:
- Static illustrations
- Frame-independent effects
- Color correction work
Workflow Tips
- Start with 1 frame visible in each direction
- Increase frames for fast motion or complex paths
- Reduce opacity if ghosts are distracting
- Toggle off occasionally to see the true frame
- Use with timeline - navigate frames to check different overlays