Animation on Ghafoor's Personal Blog

AOS Animation Example in HBStack

noreply@example.com (AG Sayyed) — Thu, 17 Jul 2025 15:00:00 +0000

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: