Before Release 5: This article is for organisations that haven't moved to Release 5 yet. On Release 5, your scenes are on the left and the settings on the right: see Adding scene transitions.

How it works

Transitioning from one scene to the other currently goes simply with a black fade-in/fade-out in between. This default can be overwritten by other transitions so switching scenes is more seamless. This is how it works:

Create scene 1 with background video or image and assets (as usual).
Create scene 2 with background video or image and assets (as usual).
Add either a 'custom transition' or an 'effect transition' to scene 2.

Each scene that contains a transition, will always start with this transition before it shows the actual scene background. So, switching from scene 1 or scene 10 to scene 2 will show this transition first, before it shows the scene 2 content.

Two types of transitions

To ensure smooth transitions between your scenes, we now offer 2 types of transitions:

Custom Transitions: Upload your own video to the background library to use as a transition.
Effect Transitions: Pre-built effects like fade, cover, and wipe.

❕With introducing the effect transitions, we haven’t touched the default transition, so if you don’t choose an effect, your story will flow just as it always has with a black fade-in/fade-out.

Add a custom transition

Go to the story designer.
Click on Transition icon on right side panel in the Story Designer.
Under 'Select transition' select Custom
Select your video files from the background library
Drag the desired transition either to the asset side panel or the canvas directly
Select Transitions settings via the Transition icon in the top bar
If you turn Set transition time off - it automatically calculates transition duration based on the video length.
If you turn Set transition time on - it shows the option of the transition duration.
- Duration - how long the transition should take
- Loop - sets video to loop mode, the user can use really short videos for longer transitions.

Add an effect transition

Go to the story designer.
Click on Transition icon on right side panel in the Story Designer.
Under 'Select transition' select Effects
Drag the desired transition either to the asset side panel or the canvas directly
Select Transitions settings via the Transition icon in the top bar
- You can set the Duration of the effect transition
  Control how long the transition plays (default is 0.8 seconds, with a minimum of 0 seconds and a maximum of 10 seconds).
- Depending on what effect you choose, you can set the Direction of the effect transition. Choose the animation’s direction (e.g., up, down, left, right). Default direction for effect transitions is 'To top' (animation from bottom to top).

Available Effect Transitions

Hyro offers a variety of effect transitions for you to choose from:

Cover Transitions: Cover-Down, Cover-Left, Cover-Right, Cover-Up
Direct Transition: Direct
Fade Transition: Fade
Push Transitions: Push-Down, Push-Left, Push-Right, Push-Up
Uncover Transitions: Uncover-Down, Uncover-Left, Uncover-Right, Uncover-Up
Wipe Transitions: Wipe-Down, Wipe-Left, Wipe-Right, Wipe-Up

Each effect transition has a thumbnail preview that animates to give you a preview of the transition effect. You can add these transitions to scenes or assets by dragging and dropping them.

Editing the transition

You can override an existing transition by dragging a new one onto the asset panel or the canvas directly. The Transitions panel will stay open to let you easily try multiple transitions.
If you want to make a custom transition fit the canvas better, you can:
- Click on the transition tile in the asset list - your transition will appear on the canvas (Effect transitions will be displayed as black).
- Double click on the transition on the canvas
  - Use the corners to scale
  - Drag the asset to reposition
- Click somewhere else on the canvas
- It will save automatically

Changing the transition title

You can edit the name of a transition asset by double clicking on the title.