Transitions
1. Introduction
Transitions define the animation of a scene, or piece of content, entering and leaving on screen.
The 'Transition In' effect occurs when the user navigates to the scene and defines how the scene or content enters.
The 'Transition Out' effect occurs when the user navigates from one scene to another and defines how the withdrawing scene or content leaves.
The 'Transition Out' effect only appears when the user navigates to a different scene and will not work with a single scene by itself.
2. Transition options
You can select from a number of options for both transitions, as well as specify the length of time they take to complete and the delay before they start.
3. Scene transitions
In this simple example, we have two scenes, the first with a button and video, and the second with an image.
From the 'Scene Transitions' setting in the Scene Properties panel, we can add simple 'fade in' and 'fade out' transitions to the first scene.
Scene Transitions affect all content within a given scene.
4. Content transitions
Clicking through to the second scene we can select the image, click the 'Transitions' tab and add a 'Slide in from top' transition. This is an example of adding a transition directly to a piece of content.
5. Navigating between scenes
The final step is to link the two scenes so the first can navigate to the second.
We do this by heading back to the first scene, selecting the button, and adding an action to 'Go to scene' 2 when tapped.
6. Previewing
Now when the experience is previewed, the first scene fades in after the zapcode is scanned and when the button is tapped the first scene fades out and the image in the second scene slides in from the top.
7. Next Steps
For more information on transitions as well as a list of the actions and content types that can transition to a new scene, please check out our documentation.