IOAA

Intersection Observer API Animation

⚡ Fast animation Inteserction Observer library

IOAA - Intersection Observer API Animation

Demo

Demo

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