@marlospomin/sight

Sight

A simple package to trigger an animation using Animate.css.

Features

• Using intersection Observer API.
• Simple and small.
• Performant.
• Requires animate.css to do anything.

Install

# Using npm
npm install @marlospomin/sight

# Using yarn
yarn add @marlospomin/sight

Now include the script and you should be good to go.

// es6
import sight from '@marlospomin/sight'

// commonjs
const sight = require('@marlospomin/sight')

Usage

Add data-sight to your elements and the animate class you wish to use, like the example below.

<img data-sight src="" alt="" class="shake">...</img>

Call sight anywhere in your code:

// Call me
sight()

Configuring

Pass options to sight like the example below:

// Custom options
sight({
  selector: '[data-sight]',
  threshold: [0, 0.25, 0.5, 0.75, 1]
})

Browser Support

You can check the supported browsers here.

License

Code released under the MIT license.