ScrollReveal is an AniJS helper function, that allows you to animate several components when they enter the viewport. If you don't now nothing about AniJS, you can find documentation an examples at the official site.
If: scroll, on: window, do: animation, to: any element
1 - Put the ScrollReveal helper file on your page after the AniJS core file.
<!-- AniJS Core File -->
<script src="anijs-min.js"></script>
<!-- ScrollReveal Helper -->
<script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script>
2- Create a declarative sentence with if , on and Before definitions as it is shown in this example:
<div class="item" data-anijs="if: scroll, on: window, do: swing animated, before: scrollReveal"></div>
3 - Don't forget to add the CSS animation styles definition.
<head>
<!-- AniCollection.css library -->
<link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
</head>
4 - Full initialization code:
<head>
<!-- AniCollection.css library -->
<link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
</head>
<body>
<div id="item" data-anijs="if: scroll, on: window, do: swing animated, before: scrollReveal">
Cuba 2022
</div>
<!-- AniJS Core File -->
<script src="bower_components/anijs/dist/anijs-min.js"></script>
<!-- ScrollReveal Helper -->
<script src="bower_components/anijs/dist/helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script>
</body>
For more details about how to use AniJS you may go to AniJS Official Website. Besides, if yo want to create your own helper functions you may read about it in Writing before and after functions .