Staged Input Form with Smooth Transitions

This form avoids overwhelming the user by being split up into digestible chunks. An attractive resize transition between stages catches the eye and maintains engagement.

The form inputs take place on a single screen, with the animation being handled by a separate screen. When the user needs to advance between sections, the animation screen is navigated to, before redirecting back.

When we navigate to the animation screen, we pass the following:

• The Start Width and Height, which are those of the current content container
• The Target Width and Height, which are those of the container on the next stage
• The heights and widths are maintained in a collection which also has the title, subtitle and order number of each stage

// go to next form section
Navigate(
    'Fade Screen',
    ScreenTransition.Fade,
    {
        StartWidth:Parent.Width,
        StartHeight:Parent.Height,
        TargetWidth:LookUp(colScreens, Order = varCurrStage).Width,
        TargetHeight:LookUp(colScreens, Order = varCurrStage).Height + 230,
        ResetTimer:true
    }
);

Set(varCurrStage, 1);

By using fade animations on each screen transition, we can fade away/in the content. On the animation screen, we have an empty white container and a timer, with the container’s dimensions resizing from the Start to Target values:

// adjust height according to timer progress
StartHeight + ((TargetHeight - StartHeight) * (tmrFadeTimer.Value / tmrFadeTimer.Duration))

The form avoids the needs for scrolling through numerous fields and allows ‘stages’ to be focused on capturing a particular detail. Form inputs can be saved as we go to a variable, and the user can go backwards and forwards as needed. A potential build could be to add a progress bar to show the user how much is left to complete.