Animate on scroll module.
Become a backer or sponsor to support our work.
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.
hugo.yaml
1module:
2 imports:
3 - path: github.com/hugomods/aos
hugo.toml
1[module]
2 [[module.imports]]
3 path = 'github.com/hugomods/aos'
hugo.json
1{
2 "module": {
3 "imports": [
4 {
5 "path": "github.com/hugomods/aos"
6 }
7 ]
8 }
9}
Note
Please skip this step if your theme supports HugoPress, such as HB Framework themes.
1{{ partialCached "aos/assets/css" . }}
Note
Please skip this step if your theme supports HugoPress, such as HB Framework themes.
1{{ partialCached "aos/assets/js" . }}
hugo.yaml
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
hugo.toml
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'
hugo.json
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.
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}
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.
Please make sure you’ve enabled the markup.goldmark.parser.attribute.block
.
hugo.yaml
1markup:
2 goldmark:
3 parser:
4 attribute:
5 block: true
6 title: true
hugo.toml
1[markup]
2 [markup.goldmark]
3 [markup.goldmark.parser]
4 [markup.goldmark.parser.attribute]
5 block = true
6 title = true
hugo.json
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.