Skip to content
/ ioaa Public

Intersection Observer API Animation ⚡ Fast animation Inteserction Observer library

License

Notifications You must be signed in to change notification settings

jerosoler/ioaa

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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