Simple library to add animation on intersection

Install

Simple install with npm or download dist file.

NPM

npm install ioaa -s

Script

<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);
    }
}