Animate on Scroll

Module
github.com/hugomods/aos

The github.com/hugomods/aos module add support for the AOS library, which allow attaching simple animations on elements that can be triggered on scroll.

Import the Module

1module:
2  imports:
3  - path: github.com/hugomods/aos

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/aos'

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/aos"
6         }
7      ]
8   }
9}

Import the Styles

Please skip this step if your theme supports HugoPress, such as HB Framework themes.

1{{ partialCached "aos/assets/css" . }}

Import the JavaScript

Please skip this step if your theme supports HugoPress, such as HB Framework themes.

1{{ partialCached "aos/assets/js" . }}

Site Parameters

1params:
2  aos:
3    css_url: https://unpkg.com/aos@next/dist/aos.css
4    js_url: https://unpkg.com/aos@next/dist/aos.js

1[params]
2  [params.aos]
3    css_url = 'https://unpkg.com/aos@next/dist/aos.css'
4    js_url = 'https://unpkg.com/aos@next/dist/aos.js'

1{
2   "params": {
3      "aos": {
4         "css_url": "https://unpkg.com/aos@next/dist/aos.css",
5         "js_url": "https://unpkg.com/aos@next/dist/aos.js"
6      }
7   }
8}

You don’t have to specify those parameters unless necessary.

css_url

The css_url represents the URL of AOS styles, you can replace it with any CDN, or even a self hosted.

js_url

Similarly, this parameter is used to specify the URL of AOS JavaScript, feel free to replace it with whatever CDN you like.

AOS Options

To tweak the AOS options, you’ll need to create the assets/mods/aos/js/options.ts file in following form.

1export default {
2  delay: '1s'
3  // ...
4}

Usage

AOS set animation by using data-aos attribute:

1<div data-aos="fade-in"></div>

And adjust behavior by using data-aos-* attributes:

 1<div
 2  data-aos="fade-up"
 3  data-aos-offset="200"
 4  data-aos-delay="50"
 5  data-aos-duration="1000"
 6  data-aos-easing="ease-in-out"
 7  data-aos-mirror="true"
 8  data-aos-once="false"
 9  data-aos-anchor-placement="top-center">
10</div>

https://github.com/michalsnik/aos#2-set-animation-using-data-aos-attribute.

You can also use AOS with Markdown block attributes in the content file, which is more convenient than creating shortcodes sometime.

Examples

AOS Example Using Markdown Block Attributes

Please make sure you’ve enabled the markup.goldmark.parser.attribute.block.

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

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.parser]
4      [markup.goldmark.parser.attribute]
5        block = true
6        title = true

 1{
 2   "markup": {
 3      "goldmark": {
 4         "parser": {
 5            "attribute": {
 6               "block": true,
 7               "title": true
 8            }
 9         }
10      }
11   }
12}

1The first fade up line.
2{ data-aos="fade-up" }
3
4The second fade up line with `200ms` delay.
5{ data-aos="fade-up" data-aos-delay="200" }

The first fade up line.

The second fade up line with 200ms delay.