CSS @keyframes como animaciones de secuencia en scroll-Motus. js
| Autor: | alexcambose |
|---|---|
| Views Total: | 1,082 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 11, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Motus. js es una biblioteca de animación de JavaScript para animaciones activadas por desplazamiento que te permiten controlar los pasos intermedios en una secuencia de animación similar a la CSS @keyframes .
Funcionamiento
Instale & descargar el Motus a través de NPM.
# NPM $ npm install motus --save
Importe la biblioteca Motus en el documento.
<script src="dist/motus.js"></script>
Crear una nueva animación motus, establecer las posiciones de inicio/final donde la animación debe iniciarse y se detiene, especificar el elemento de destino y, a continuación, controlar los pasos intermedios de la secuencia de animación de la siguiente manera:
const myAnimation = new Motus.Animation(
new Motus.Point(100),
new Motus.Point(1800),
document.getElementById('example'),
{
50: {
width: {
to: '200px'
}
},
100: {
width: {
to: '100px'
}
}
}
); Activa la animación y listo.
Motus.addAnimation(myAnimation);
Registro de cambios
v2.0.2 (04/11/2019)
- Actualizado
v2.0.1 (03/21/2019)
- Actualizado
v2.0.0 (03/12/2019)
- Actualizado
v1.0.1 (06/30/2018)
- Actualización de posición fija al desplazarse
