Classic animations (AOS)
WebAcappella has long 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, and easy-to-adjust appearance effects without writing code.
Enable AOS in your project
- Open your WebAcappella project.
- Go to Project Properties → Animations.
Apply an appearance effect to a component
- Select a component (text, image, button, block, etc.).
- Open the Appearance Animation panel.
- 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).
- Prioritize content The effect should aid comprehension (highlight a title, CTA, key step).
- Performance Avoid animating too many elements simultaneously, especially on mobile devices.
- Visual consistency Harmonize durations, delays, and types of effects across the site.
- Accessibility/Comfort Opt for short, moderate effects that are pleasing to the eye and non-intrusive.
- Browser compatibility Some effects may appear differently depending on the browser (particularly Safari). Test your pages on multiple devices.
Recommended use cases
- Section titles: slight fade + subtle vertical slide.
- Visual blocks (cards, thumbnails): very slight zoom when appearing.
- CTAs (call-to-action buttons): clean and fast fade to remain responsive.
- Lists of items: cascading appearance (small successive delays).
Migration from WOW.js
- Old projects configured with WOW.js remain functional.
- To take advantage of AOS: 1. Enable AOS in the Project Properties. 2. Go back over your key components and reapply the appearance effects. 3. Align the durations and delays to ensure visual consistency.
Marketing reminder
Well-chosen animations reinforce your messages (promotions, new features, social proof) and guide attention. Overuse of effects distracts from the content, tires the user, and can negatively impact the perception of quality and speed.