Animaciones rápidas con Velocity.js
Velocity.js es un motor de animación de alto rendimiento que es fácil de usar y funciona con y sin jQuery.
Instalación
Puedes incluir Velocity.js en tu proyecto usando npm:
npm install velocity-animate
O puedes utilizar un CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>
Animación básica
A continuación se muestra un ejemplo sencillo del uso de Velocity.js para animar un elemento:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación Velocity.js</title>
</head>
<body>
<div id="box" style="width:100px; height:100px; background-color:red;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>
<script>
Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000 });
</script>
</body>
</html>
Animación avanzada
Velocity.js proporciona varias funciones para animaciones avanzadas, como secuencias, facilitación y animaciones SVG.
- Secuencias
Las secuencias permiten encadenar animaciones. A continuación, se muestra un ejemplo:
Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000 })
.then(() => {
return Velocity(document.getElementById('box'), { top: "100px" }, { duration: 1000 });
});
- Suavizado
Velocity.js ofrece una variedad de opciones de suavizado para que las animaciones se vean más naturales. A continuación, se muestra un ejemplo:
Velocity(document.getElementById('box'), { left: "100px" }, { duration: 1000, easing: "spring" });
- Animaciones SVG
Velocity.js también puede animar elementos SVG. A continuación, se muestra un ejemplo:
Velocity(document.querySelector('svg'), { strokeDashoffset: 0 }, { duration: 1000 });
Para obtener más detalles y ejemplos, consulte la documentación de Velocity.js.