https://github.com/jerosoler/ioaa

Intersection Observer API Animation ⚡ Fast animation Inteserction Observer library
https://github.com/jerosoler/ioaa

animation animation-css css intersectionobserver intersectionobserver-api ioa stylesheets

Last synced: 2 months ago
JSON representation

Intersection Observer API Animation ⚡ Fast animation Inteserction Observer library

• Host: GitHub
• URL: https://github.com/jerosoler/ioaa
• Owner: jerosoler
• License: mit
• Created: 2021-06-06T10:59:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-06T12:07:35.000Z (over 3 years ago)
• Last Synced: 2024-10-03T07:05:02.085Z (4 months ago)
• Topics: animation, animation-css, css, intersectionobserver, intersectionobserver-api, ioa, stylesheets
• Language: JavaScript
• Homepage: https://jerosoler.github.io/ioaa/
• Size: 61.5 KB
• Stars: 1
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


IOAA

        
Intersection Observer API Animation

        ⚡ Fast animation Inteserction Observer library



# IOAA - Intersection Observer API Animation

## Demo

[Demo](https://jerosoler.github.io/ioaa/)

## Install

Simple install with npm or download dist file.

### NPM

```bash

npm install ioaa -s

```

### javascript

```javascript

import ioaa from "../dist/ioaa.min.js";

```

## How to use

### HTML

```html



  ...



```


| 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

```

        import ioaa from "../src/ioaa.js";

        ioaa(); // Or ioaa('.YOU_CLASSNAME');  Default ClassName ioaa

```

### CSS

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

  }

}

```