# cltvo-animate-on-scroll

> Módulo de jQuery que permite triggerear animaciones en el DOM

Latest version **1.1.0** (published 2017-09-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install cltvo-animate-on-scroll
pnpm add cltvo-animate-on-scroll
yarn add cltvo-animate-on-scroll
bun add cltvo-animate-on-scroll
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-09-13 |
| First published | 2017-09-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Diego Villaseñor |
| Maintainers | diegovdc |

## Links

- npm: https://www.npmjs.com/package/cltvo-animate-on-scroll
- npm.io page: https://npm.io/package/cltvo-animate-on-scroll

## Dependencies (1)

- [lodash.debounce](https://npm.io/package/lodash.debounce.md) 4.0.8

## Recent versions

- 1.1.0 (latest) — 2017-09-13
- 1.0.0 — 2017-09-08

## README

# cltvo-animate-on-scroll

Módulo de jQuery que permite triggerear animaciones en el DOM. Esto se hace agregando una clase cuyo CSS generará la una animación.

## Uso
```
//main.js
import animateOnScroll from 'cltvo-animate-on-scroll'
animateOnScroll($, 300, 'show', '.animatable_JS', '#my-container')

//animated.html
<div id="my-container">
  <div class="animatable_JS">Debe estar dentro de #my-container</div>
</div>

//animated.css
#my-container .animatable_JS {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#my-container .animatable_JS.show {
  opacity: 1;
}
```

## Argumentos de la función
`animateOnScroll :: jQuery -> Offset -> TriggerClass -> AnimatableElementSelector -> RowSelector -> DOMAnimation`

Donde:
```
type Offset = Number - cantidad de pixeles que la pantalla debe recorrer antes de que se muestre triggerée la animación (a partir del Row seleccinado)
type TriggerClass = String -- i.e. 'show' o '.show' -- debe ser una clase pues se usa el método de jQuery "addClass"
type AnimatableElementSelector = String -- i.e. '.animatable_JS'
type RowSelector = String -- i.e. '#my-container'

```
## Nota
La función sólo opera una vez, y si el `scrollTop` de la ventana es mayor a la posición del Row, etonces, inmediatamente se habrá agregado esa clase

---
_Source: https://npm.io/package/cltvo-animate-on-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._