AOS Animation Example in HBStack

1. Prerequisites

• Enable Goldmark attribute parsing in your Hugo config:

1markup:
2  goldmark:
3    parser:
4      attribute:
5        block: true
6        title: true

• Import required modules in config/_default/module.yaml:

1imports:
2  - path: github.com/hbstack/header/modules/banner
3  - path: github.com/hugomods/aos

2. Basic Usage

You can add AOS attributes to any block element by appending { data-aos="fade-up" } or other AOS attributes.

Example: Heading Animation

1# Animated Heading { data-aos="fade-up" data-aos-delay="100" }

Example: Paragraph Animation

1This paragraph will animate on scroll. { data-aos="fade-right" data-aos-delay="200" }

Example: Banner Title and Description

Add attributes in front matter or content:

1header:
2  banner:
3    title: |
4      Animated Banner Title
5      { data-aos="fade-down" }
6    description: |
7      This description fades in with a delay.
8      { data-aos="fade-up" data-aos-delay="300" }
9    img: /images/banners/black.jpg

3. Live Demo

Animated Heading

Welcome to AOS Animation Demo

Animated Paragraph

This paragraph will animate from the right as you scroll. { data-aos=“fade-right” data-aos-delay=“200” }

Animated Image

{ data-aos=“zoom-in” data-aos-delay=“400” }

Banner Example

If using the header banner module, set attributes in front matter as shown above.

4. Supported AOS Attributes

• data-aos: Animation type (e.g., fade-up, fade-right, zoom-in, etc.)
• data-aos-delay: Delay in ms before animation starts
• data-aos-duration: Duration of animation in ms
• data-aos-easing: Easing function
• data-aos-anchor: Anchor element

See AOS documentation for more options.

5. Notes

• You can use AOS attributes on any block element: headings, paragraphs, images, banners, etc.
• Make sure the required modules are imported and config is set.
• For banners, use YAML block in front matter as shown.

References:

• HBStack Animation Example
• AOS Documentation