Transitions are a more advanced design feature that can elevate the look and feel of your flow when used thoughtfully. They're not required, but when used well, they can make your content feel smoother, more dynamic, and more professional.
A transition is a visual effect that controls how something appears on the screen. Instead of an element showing up instantly, a transition lets it fade in, flip, bounce, rotate, or zoom gently into view.
Each transition has additional direction settings for the transition, e.g, up, down, left, and right, as well as you can set the duration and eventual delay in the transition.
This adds polish to your flow and can help guide your user's attention more naturally.
How to configure transitions:
Transitions are found from the advanced tab in the builder. From here, you can set up both enter transitions and leave transitions. Once a transition style is selected, you can also determine the speed of the transition.
You can add transitions to almost any part of your flow:
Entire flow pages: Here, we provided an example using Fade In- Down on the presentation page.
Rows: Here, we provided an example using Zoom in on a row with a duration of 400 ms and a 100 ms delay:
Columns: Here we provided an example using Rotate in - Up left with a duration of 500 ms and a 100 ms delay:
Individual elements: Here we provided an example of the button element using Fade In Left with a duration of 500 ms without a delay:
However, be aware that transitions on the game element are not supported.
Best practices when using transition
For the best user experience, we recommend avoiding long transitions and extended delays on registration pages, as this could lead to higher drop-off rates.