Transition and morphing effects

In WebAcappella, you can create transitions to animate the transition between two pages. Each transition is given a name of your choice: this is simply a label that allows you to find it in your settings.

There are two use cases:

1. Basic effect: morphing between two elements

• Create a new transition and give it an explicit name (e.g., Header Logo).
• Associate this name with a component on page 1 and the corresponding component on page 2.
• When changing pages, WebAcappella applies a smooth morphing effect between these two elements (example: 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 enjoyable.

2. Animation effect for an identical element

• Some elements retain the same appearance from one page to another (e.g., a navigation button, icon, or static image).
• If you assign a transition to them, WebAcappella does not perform morphing but instead applies an accompanying animation effect (such as a fade or appearance).
• This avoids an abrupt break and adds fluidity to the page transition.

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

See the demo