# eff-anim from [Kit-elements]

eff-anim es un componente donde le puedes pasar distintas animaciones para la vista usando el viewport

![video demo](https://res.cloudinary.com/dijk5nuuk/image/upload/v1739903127/eff-anim-video.gif)

### Instalacion

Instala con npm: 

```js
 npm install eff-anim 
```

## Nota

### contiene múltiples efectos(animaciones) que le puedes pasar al componente

| Nombre | animación |
| ------ | ------ |
| eff-left | Se traslada de izquierda a posición normal |
| eff-right | Se traslada de derecha a posición normal |
| eff-bottom |Se traslada de abajo a posición normal |
| eff-top | Se traslada de arriba a posición normal |
| eff-zoom | effecto zoom desde el fondo de la pantalla |
| eff-z-left | effecto zoom y traslado de izquierda a normal |
| eff-z-right | effecto zoom y traslado de derecha a normal |
| eff-z-top | effecto zoom y traslado de arriba a normal |
| eff-z-bottom |effecto zoom y traslado de abajo a normal |
| eff-flip| effecto flip desde posición normal |
| eff-f-left |effecto flip y traslado de izquierda a normal |
| eff-f-right | effecto flip y traslado de derecha a normal |
| eff-f-top | effecto flip y traslado de arriba a normal |
| eff-f-bottom | effecto flip y traslado de abajo a normal |

# Props y uso

### Props

- children: componente contenedor
- effect: nombre de la animación a usar
- threshold: altura de la vista del contenedor para la animación


### Uso

```js
import { ContainerViews } from "eff-anim";

  function App() {

  return (
    <ContainerViews threshold={0.9} effect="eff-zoom">
        <h1>Hello World</h1>
        <p>Programming with react + typescript</p>
    </ContainerViews> 
  );
};
```

# Probar

Ejecuta y visita localhost

```js
  npm run dev
```

[Kit-elements]: <https://github.com/dariomvg/kit-elements>