Studio Design

Scene Transitions

2 min readUpdated

Add motion between scenes so the lesson feels like turning pages, not flipping a switch.

A transition is the short animation a learner sees when one scene gives way to the next. Used well, transitions make a lesson feel like turning pages in a book — a clear, satisfying sense of "I just moved forward." Used poorly, they get in the way. The defaults stay out of your way; the named options are there when you want a particular feel.

Where the setting lives

Open a scene's properties panel (click the scene in the Scenes tab of the left panel) and find the Transition section, below Background and Applied layout. Choose one option — it applies whenever a learner enters that scene.

The options

  • None — instant. The new scene appears with no animation. Best for tightly-paced practice where every millisecond matters.
  • Cube — the next scene rotates into view as if printed on the next face of a 3D cube. Best for storybook-style lessons or when forward motion should feel deliberate.
  • Slide — the new scene pushes in from the side. Best when the learner is moving through a linear sequence and you want spatial reinforcement.
  • Fade — the old scene dissolves into the new one. Best for reflective transitions (e.g. moving from a question to a "well done" celebration) where you don't want the eye yanked across the screen.
  • Flip — the scene flips top-to-bottom. Best for "flashcard reveal" moments — when a scene is meant to feel like turning a card over.

Direction (Cube and Slide only)

Cube and Slide are _spatial_ transitions: the eye expects forward motion when moving to a new scene and backward motion when revisiting one. We figure out direction from the learner's session history:

  • Forward — the learner is entering a scene they haven't seen yet in this attempt.
  • Back — the learner is returning to a scene they've already visited (for example, from a "Try again" loop, a condition that routes them back, or a button that jumps to an earlier screen).

If a learner restarts the lesson (e.g. via "Try again" on the results screen), session history resets — the next scene is treated as "forward" again.

Fade and Flip ignore direction; they look the same either way.

Reduced motion

Learners who have Reduce motion enabled in their operating system settings see no animation at all, regardless of which transition you pick. The product respects WCAG 2.3.3 — motion is an enhancement, never a barrier.

Tips

  • Pick one per lesson, not per scene. Variety between scenes feels noisy; a single consistent transition gives the lesson a rhythm. The quickest way is to set it on one scene and duplicate that scene: the copy keeps its transition. _Example: Make a picture-book story whose pages turn sets Slide on its first page, copies the page twice, and gives the ending a Fade._
  • Cube is great for the first scene of a unit and the celebration scene at the end. Use Fade or None for the working middle so the motion stays meaningful.
  • Avoid Slide on lessons that auto-advance every few seconds — the constant lateral motion is distracting.

See also

Learn by doing

Was this article helpful?