Classic animations (AOS)

For a long time, WebAcappella offered appearance animations via WOW.js. Now you can choose to use the AOS (Animate On Scroll) library directly in the Project Properties. AOS offers modern, fluid appearance effects that are easy to adjust, without the need to write code.

Activate AOS in the project

  1. Open your WebAcappella project.

  2. Go to Project properties → Animations.

Apply an appearance effect to a component

  1. Select a component (text, image, button, block, etc.).

  2. Open the Animation on Appearance panel.

  3. Choose an effect type (e.g. fade, slide, zoom, slight rotation).

Best practices

  • Less is more Limit yourself to a few consistent effects (e.g. fade + slight translation).

  • Focus on content The effect must be easy to understand (highlight a title, a CTA, a key step).

  • Performance Avoid animating too many elements simultaneously, especially on mobile.

  • Visual consistency Harmonize durations, timescales and types of effect across the site.

  • Accessibility / Comfort Prefer short, moderate effects that are pleasing to the eye and non-intrusive.

  • Browser compatibility Some effects may appear differently in different browsers (especially Safari). Test your pages on several devices.

Recommended use cases

  • Section titles: slight fade + discreet vertical slide.

  • Visual blocks (maps, thumbnails): very slight zoom on appearance.

  • CTA (action buttons): fade in cleanly and quickly to stay responsive.

  • Lists of items: cascading appearance (successive short delays).

Migration from WOW.js

  • Older projects configured with WOW.js remain functional.

  • To take advantage of AOS: 1. activate AOS in the project properties. 2. Go back over your key components and reapply the appearance effects. 3. Align durations and delays to ensure visual consistency.

Marketing reminder

Well-chosen animations enhance your messages (promotion, novelty, social proof) and guide attention. Too many effects distract from the content, tire the user and can damage the perception of quality and speed.