Transitions between pages

WebAcappella allows you to add transition effects when moving from one page to another. These animations make navigation smoother and reinforce your site's visual identity.

Enable a page transition

1. Open your WebAcappella project.
2. Go to Project Properties → Page Transitions.
3. Select the desired effect from the list.

Available effects

WebAcappella offers several simple and effective effects, including:

• Crossfade: the page fades out smoothly while the next one appears.
• Slide: the new page slides in from the left, right, top, or bottom.
• Zoom: the current page zooms out and the next page zooms in.

Transitions by element

In addition to global transitions between pages, WebAcappella allows you to define specific transitions for certain elements (e.g., a logo, button, or image).

• If an element changes between two pages, a smooth animation can link its two states.
• If an element remains the same, a small accompanying animation can be applied (e.g., a slight fade or movement).

These transitions per element offer a more personalized rendering and can be combined with the global effect chosen for the pages.

Best practices

• Simplicity above all Transitions should remain discreet. The user is looking for fluidity above all else.
• Consistency Choose a single overall effect for the entire site and harmonize the transitions applied to the elements.
• Performance On mobile devices or slow connections, an overly heavy effect can interfere with navigation. Opt for quick and light transitions.
• Marketing utility An elegant transition enhances your brand image, but too much can distract from the essential: the content of your pages.