What are transitions for?

Transitions help the user move through the pages in a flow in a more smooth way. They give the content and/or title an animation when a new page is reached.

Types of transitions available:

  • Rise and Fade
  • Rise and Fade In
  • Rise and Fade Delay

How to add transitions to a flow

Transitions can be added to titles and to the content of a page. They can be global (across the entire flow) or on specific pages.

Step 1:

  • Select the type of animation.

Step 2:

  • If you want the same transition for all pages, select the globe. Otherwise, don't click on the globe icon and add different types of transitions on your pages.

Step 3:

  • Give the transition a delay time, this will make the pages with the transition go to the following page after the chosen time.

Dos and Don't when applying transitions

  1. 1.
    The most important thing to have in mind when using transitions is that styles for the content that will transition should target the elements by their in-page key. Check how to do this here.
  2. 2.
    Don't target content by page or component key if you want to apply a transition to it. This may result in the content moving or the style of it changing before the transition ends. Instead, target the content with an in-page key.