Onion skin

Render neighbouring frames as faded ghosts behind/in front of the active frame. Essential for animation: you can see where pixels were and where they're going while drawing the in-between.

Optional before / after tints colour-code the direction (e.g. red = past, blue = future) — Aseprite-style.

---

Where to find it

Tools panel → Onion Skin section.

---

Toggle and configure

Control	What
ON / OFF button	Master toggle
Before	How many previous frames to show (0–5)
After	How many next frames to show (0–5)
Opacity	Base alpha for the ghost frames (5–100%) — closer frames fade less
Before tint	Optional colour for past frames (checkbox + colour picker)
After tint	Optional colour for future frames

When tints are off, ghosts use their original colours at low opacity. With a tint, every opaque pixel of the ghost gets re-coloured to the chosen hex while preserving alpha — so you see a coloured silhouette.

---

Example: tinted onion skin

Set:

• Before = 1
• After = 1
• Before tint = #ef4444 (red)
• After tint = #3b82f6 (blue)

You'll see your previous frame as a red silhouette and your next frame as a blue silhouette — both at the configured opacity, both behind the active frame.

---

How frames blend

The render order is:

1. Before frames (oldest first → newest), each at opacity * (1 − (i−1)/before) so the closest one is most opaque.
2. Active frame at full alpha.
3. After frames (closest first → farthest).

Tints (when set) replace the RGB of opaque pixels using globalCompositeOperation = 'source-in' over a temp canvas — the alpha is preserved so you still see the silhouette, not a solid block.

---

Tips

• Onion skin is a viewer-only effect — it doesn't change pixel data and doesn't affect exports.
• Default Before / After is 1 each, with no tint. Try increasing the range when planning a big motion (4 ahead, 4 behind) to see the trajectory.
• When animating a character with a static background, you'll see the background ghosting too. Either:
  • Link the background layer (it's the same in every frame, so the "ghost" looks identical to the active = no visible ghost)
  • Hide the background layer while you work
• Pair tints with Frame tags for a quick overview of where you are in a long animation.
• Tints persist in workspace presets — save a preset with your preferred before/after colours and reload it across projects. The tints are also written to the .mstack file as onionTintBefore / onionTintAfter, so they survive open / close cycles.

---

Related

• Frames & timeline
• Frame interpolation — for generating in-betweens you'd then refine with onion skin
• Layer linking