Da Vida a tu Web: Guía Completa para Añadir Animaciones Lottie
Aprende a integrar animaciones profesionales en React, Next.js y HTML puro.
¿Por Qué Usar Animaciones Lottie?
Una página estática puede ser informativa, pero una con animaciones fluidas comunica modernidad y profesionalismo. Sin embargo, usar GIFs pesados o vídeos puede ralentizar tu sitio y empeorar la experiencia de usuario.
Lottie es la solución definitiva. Son animaciones vectoriales basadas en JSON, lo que las hace increíblemente ligeras, escalables sin pérdida de calidad y de alto rendimiento. Se renderizan en tiempo real en cualquier dispositivo, como si fueran código nativo.
Método 1: Integración en React / Next.js (Recomendado)
Esta es la forma más robusta y recomendada si trabajas con un framework como React o Next.js.
1. Encuentra tu Animación
Visita LottieFiles, la mayor biblioteca de animaciones gratuitas. Busca lo que necesites, y cuando encuentres una que te guste, copia la URL del archivo (suele terminar en .json o .lottie).
2. Carga el Reproductor Web
Usa el componente <Script> de Next.js para cargar el reproductor oficial. Esto optimiza la carga y evita conflictos.
3. Usa el Web Component
Utiliza la etiqueta <dotlottie-wc> en tu JSX para mostrar la animación. ¡No necesitas instalar ningún paquete de npm!
4. Informa a TypeScript (Opcional)
Para evitar errores de TypeScript, puedes declarar el tipo del web component de forma global. Así, tu editor de código lo reconocerá.
El Código: Componente para React/Next.js
Este es un ejemplo de cómo se vería tu componente reutilizable. Cópialo, pégalo y cambia la URL en la propiedad `src`.
'use client';
import React from 'react';
import Script from 'next/script';
// Informa a TypeScript sobre el web component
declare global {
namespace JSX {
interface IntrinsicElements {
'dotlottie-wc': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
src: string;
autoplay?: boolean;
loop?: boolean;
style?: React.CSSProperties;
}, HTMLElement>;
}
}
}
const LottieAnimation = () => {
return (
<>
{/* 1. Carga el script del reproductor una sola vez */}
<Script
src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"
type="module"
strategy="lazyOnload"
/>
{/* 2. Usa el componente donde lo necesites */}
<dotlottie-wc
src="URL_DEL_LOTTIE.lottie"
style={{ height: '300px', width: '300px' }}
autoplay
loop
></dotlottie-wc>
</>
);
};
export default LottieAnimation;Método 2: Integración en HTML y CSS (El Más Sencillo)
¿No usas React? No hay problema. Integrar Lottie en una web HTML tradicional es aún más fácil y no requiere ninguna instalación.
1. Añade el Script del Reproductor
Inserta una única etiqueta <script> al final de tu etiqueta <body>. Esto cargará el reproductor web de Lottie.
2. Usa el Web Component
En el lugar donde quieras mostrar la animación, utiliza la etiqueta <dotlottie-player> y configura su propiedad src con la URL de tu animación.
El Código: Plantilla Completa para HTML
Aquí tienes una plantilla HTML lista para copiar y pegar. Solo tienes que reemplazar la URL en el atributo `src`.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación Lottie con HTML</title>
<style>
body { font-family: sans-serif; display: grid; place-content: center; min-h: 100vh; background: #111; }
.lottie-container { width: 90%; max-width: 500px; }
</style>
</head>
<body>
<div class="lottie-container">
<!-- 2. Pega tu animación aquí -->
<dotlottie-wc
src="URL_DEL_LOTTIE.lottie"
autoplay
loop
></dotlottie-wc>
</div>
<!-- 1. Añade este script al final del body -->
<script
src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
type="module"
></script>
</body>
</html>Apoya este Blog con un Hosting de Calidad
Si este tutorial te ha sido útil, considera apoyar la creación de más contenido registrando tu hosting en GoogieHost. A ti no te cuesta nada y a mí me ayudas a mantener el blog activo.
Consigue tu Hosting Gratuito Ahora