IOAA
Intersection Observer API Animation
⚡ Fast animation Inteserction Observer library
IOAA - Intersection Observer API Animation
Install
Simple install with npm or download dist file.
NPM
npm install ioaa -s
javascript
<script type="module">import ioaa from "../dist/ioaa.min.js";</script>
How to use
HTML
<div class="ioaa" data-ioaa-animation="animateLeft" data-ioaa-repeat="true">
...
</div>
Option | Default | Description |
---|
class | ioaa | Class Name for animation |
data-ioaa-animation | null | Your class name animation |
data-ioaa-repeat | false | True or False, not required |
Javascript
<script type="module">
import ioaa from "../src/ioaa.js";
ioaa(); // Or ioaa('.YOU_CLASSNAME'); Default ClassName ioaa
</script>
CSS
.animateLeft {
animation-name: fadeInLeft;
animation-duration: 1s;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}