IOAA
Intersection Observer API Animation
⚡ Fast animation Inteserction Observer librarySimple install with npm or download dist file.
npm install ioaa -s<script type="module">import ioaa from "../dist/ioaa.min.js";</script><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 |
<script type="module">
import ioaa from "../src/ioaa.js";
ioaa(); // Or ioaa('.YOU_CLASSNAME'); Default ClassName ioaa
</script>
.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);
}
}