Page transitions

WebAcappella lets you add transition effects when moving from one page to another. These animations smooth navigation and reinforce your site’s visual identity.

Activate a page transition

  1. Open your WebAcappella project.

  2. Go to Project properties → Page transitions.

  3. From the list, select the desired effect.

Available effects

WebAcappella offers several simple and effective effects, including :

  • Fade out: the page fades out slowly while the next one appears.

  • Swipe: the new page enters from left, right, up or down.

  • Zoom: zoom out on the current page and zoom in on the next.

Tip

Fading is often the most sober and universal effect, ideal for sites with varied content. Sliding or zooming is more suitable for sites with creative or immersive design.

Transitions by element

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

  • If an element changes between two pages, a fluid 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 shift).

These element-based transitions offer a more personalized rendering and can be combined with the overall effect chosen for the pages.

Best practices

  • Simplicity above all Transitions must remain unobtrusive. The user is looking for fluidity above all.

  • Consistency Choose a single global effect for the entire site and harmonize the transitions applied to elements.

  • Performance On cell phones or with a slow connection, an effect that is too heavy can hamper navigation. Choose light, fast transitions.

  • Marketing utility An elegant transition reinforces brand image, but too much of it can distract from the essential: the content of your pages.

Note

Transitions between pages are an aesthetic option. Their role is to add a touch of fluidity, not to slow down access to information.