Biblioteca de animación de JavaScript ligera Performant-animol
| Autor: | stufreen |
|---|---|
| Views Total: | 159 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 8, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Animol es una biblioteca de animación JavaScript pequeña, performante y fácil de usar que se utiliza para animar cualquier valor o atributo de un elemento DOM mediante CSS y requestAnimationFrame Api.
¿Cómo funciona?
Instale e importe la biblioteca animol.
npm install animol --save
import * as animol from 'animol';
O cargue directamente la biblioteca animol desde directorio Dist.
<script src="dist/animol.min.js"></script>
Anime un elemento cambiando entre dos objetos CSS.
const myElement = document.getElementById('myElement');
animol.css(
// DOM element
myElement,
// duration in ms
2000,
// from
{ // CSS rules here }
// to
{ // CSS rules here' },
// with or without easing functions
animol.Easing.easeInQuad,
// delay in mis
1000
); Todas las funciones de aceleración disponibles.
- Lineal
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
Animar atributos de un elemento DOM.
animol.ease(
(progress) => {
myElement.setAttribute('stroke-dashoffset', `${1000 - (progress * 1000)}`)
},
2000
);
