Skip to main content

Transitions

Animate the move from one scene to another.

When the presentScene() method is called, it immediately presents the new scene. This may be exactly what you want: show a fixation cross on one scene, and immediately switch to a scene with a stimulus. However, sometimes you want to animate the transition from one scene to another, perhaps simply for a more contemporary application experience, or to provide the user with a sense of navigation and movement.

The presentScene() method takes an optional second argument that specifies the transition to use. It can be:

  • Transition.none() - the default, which is the same as not specifying a transition.
  • Transition.slide() - slides the new scene in from another direction.

Options for the slide transition​

Transition.slide() takes an object with options for the transition. The options are:

  • direction - the direction the new scene slides towards. It can be TransitionDirection.Left, TransitionDirection.Right, TransitionDirection.Up, or TransitionDirection.Down. This is required.
  • duration - how long it takes for the transition to complete, in milliseconds. This is required.
  • easing - the easing function to use. This is optional. We'll learn about this later.

Below, the transition from the first to the second screen is an animation that slides in the new screen from right to left, which is direction: TransitionDirection.Left. The animation takes 750 milliseconds to occur.

game.presentScene(
    sceneTwo,
    Transition.slide({ direction: TransitionDirection.Left, duration: 750 })
);

The transition from the second to the first scene slides from left to right, which is direction: TransitionDirection.Right. The animation takes 250 milliseconds.

game.presentScene(
    sceneOne,
    Transition.slide({ direction: TransitionDirection.Right, duration: 250 })
);
Loading...
Explore:
  • Keep in mind the conventions of your target users. In left to right cultures, a "moving forward" transition will slide new content to the left. If you go against conventions, it can be disorienting.