Transition effects and morphing

In WebAcappella, you can create transitions to animate the transition between two pages. Each transition is given a free name: it’s simply a label that lets you find it in your settings.

There are two possible applications:

1. Basic effect: morphing between two elements

• Create a new transition and give it an explicit name (e.g. Logo header).

• Associate this name with a component on page 1 and with the corresponding component on page 2.

• When the page changes, WebAcappella applies a fluid morphing between these two elements (e.g. a large, centered logo on the home page that shrinks in the header of the next page).

This effect creates a sense of visual continuity and makes navigation more pleasant.

2. Animation effect for identical elements

• Some elements retain the same appearance from one page to the next (e.g. a navigation button, an icon, a still image).

• If you assign them a transition, WebAcappella doesn’t morph them, but instead applies an accompanying animation effect (such as a fade or an appearance).

• This avoids a sudden cut-off and adds fluidity to page passage.

This usage is particularly suited to navigation elements or repeated blocks.

Tip

• Choose clear names for your transitions so that you can easily find your way around.

• Use morphing sparingly for your key elements (logo, titles, main images).

• Combine morphing and accompanying animations to achieve elegant, coherent transitions.

Note

2-page transition demo