0.0.1 • Published 3 years ago

ioaa v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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>
OptionDefaultDescription
classioaaClass Name for animation
data-ioaa-animationnullYour class name animation
data-ioaa-repeatfalseTrue 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);
  }
}