Skip to main content

​
Overview

Onion skinning is an essential animation technique that displays semi-transparent overlays of previous and next frames while you draw. This allows you to see the motion flow and ensure smooth transitions between frames.
Onion skinning gets its name from traditional animation, where artists would stack semi-transparent onion skin paper to see multiple drawings at once.

​
Enabling Onion Skinning

You can enable onion skinning in several ways:
1

From the Timeline

Click the onion skin icon in the timeline toolbar. It looks like multiple overlapping frames.
2

Using Keyboard Shortcut

Press F3 to quickly toggle onion skinning on and off.
3

From the View Menu

Navigate to View → Show → Onion Skin to enable the feature.

​
Configuration Options

Control how many frames before and after the current frame are visible:
  • Previous frames: Set how many frames before are shown (default: 2)
  • Next frames: Set how many frames after are shown (default: 2)
  • Adjust using the onion skin settings panel
Start with 2 frames in each direction and adjust based on your animation speed.
Customize the transparency of onion skin frames:
  • Previous frames appear in red tint by default
  • Next frames appear in blue tint by default
  • Adjust opacity to balance visibility with the current frame
  • Change tint colors in preferences
Fine-tune the onion skin behavior:
  • Position: Show frames at their actual position or relative to current frame
  • Loop: Include frames from the beginning/end when at animation edges
  • Tags: Limit onion skinning to the current frame tag only
  • Layer: Apply onion skinning to specific layers or all layers

​
Use Cases

Character Animation

Create smooth walking, running, and action cycles by seeing the motion flow across frames.

Rotation Effects

Animate rotating objects by maintaining consistent shape and size across frames.

Morphing Transitions

Smoothly transform one shape into another by visualizing the in-between states.

Timing Adjustments

Check if movements are too fast or slow by seeing multiple frames simultaneously.

​
Workflow Tips

Best Practices for Onion Skinning
  1. Start simple: Begin with just 1-2 frames in each direction
  2. Adjust opacity: Lower opacity if onion skins are too distracting
  3. Use with preview: Combine with the preview window to check real-time animation
  4. Layer-specific: Apply onion skinning to specific layers for complex scenes
  5. Toggle frequently: Turn it off when drawing details to avoid visual clutter

​
Working with Complex Animations

For multi-layer animations: 
-- Script example: Toggle onion skin programmatically
app.command.OnionSkin { state = true }

-- Set onion skin range
app.preferences.onionskin.prev_frames = 3
app.preferences.onionskin.next_frames = 3
Performance can be affected with many visible layers and large frame ranges. If Aseprite slows down, reduce the number of onion skin frames or hide unnecessary layers.

​
Keyboard Shortcuts

ActionShortcut
Toggle Onion SkinF3
Increase Previous FramesAlt + 1
Increase Next FramesAlt + 2
Reset Onion SkinAlt + 0
You can customize these shortcuts in Edit → Keyboard Shortcuts to match your workflow.

​
Onion Skin Types

Aseprite supports different onion skin visualization modes:
Classic mode where previous frames appear in red and next frames in blue. Best for black and white or simple color work.

​
Real-Time Preview Integration

Combine onion skinning with Aseprite’s preview window for the best animation workflow:
  1. Enable onion skinning while drawing
  2. Open the preview window (F7) to see the full animation
  3. Adjust timing and spacing based on what you see
  4. Export when satisfied with the motion
Pro Tip: Use onion skinning with symmetry mode for creating perfectly balanced character animations.

​
Related Features

Animation Timeline

Learn how to manage frames and control playback

Preview Window

See your animation play in real-time while editing

Frame Tags

Organize animations into separate sequences

Export Animation

Export your animated sprites to various formats

Build docs developers (and LLMs) love

Get started for freeTalk to us