Animate on Scroll

Module	github.com/hugomods/aos
Stats

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§

Note

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

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

Import the JavaScript§

Note

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.