Animar SVG con JavaScript

Feb 6, 2026
Cómo
Graphic of 4 mountain scenes in circles on a computer screen
[dieciséis]

Hay tanto que se pueden lograr de forma nativa en el navegador utilizando CSS3 o API de animaciones web, en JavaScript. Las animaciones y transiciones simples son adecuadas para CSS3, mientras que las animaciones más complejas deben realizarse utilizando JavaScript. (Si está creando un sitio sin código, necesita un Creador de sitios web .)

El problema con la API de animación web es el soporte del navegador y el conjunto de características actual. Siendo una especificación bastante joven, esto mejorará en los próximos años.

  • La guía completa de svg

Para combatir esta función y déficit de soporte de navegador, podemos recurrir a las bibliotecas de animación, como Grenessock (GSAP). GSAP nos da la capacidad de crear animaciones complejas y múltiples líneas de tiempo, con la capacidad de animar casi cualquier elemento o pareja de propiedad / valor, todos logrados con una sintaxis simple e intuitiva.

En este tutorial vamos a usar la Biblioteca GSAP para crear algunas animaciones. La animación principal y más compleja que estaremos creando será la transición de la escena desde el día a la noche y veremos con la facilidad con que podemos encadenar juntos múltiples transiciones para crear animaciones complicadas. También crearemos algunas animaciones simples que se ejecutarán constantemente.

Si desea más opciones para su proyecto de animación, consulte nuestra compilación de la El mejor software de diseño gráfico gratuito . ¿Agregar animación a un sitio web complejo? Necesitarás un soporte Alojamiento web Servicio.

Descargar los archivos Para este tutorial.

01. Configuración de documentos

Para empezar, necesitamos horquillar el [sesenta y cinco] Pluma de grenessock

Para juzgar sus complementos premium. Para el tutorial, usaremos un SVG que ya se ha optimizado y pegado en nuestro editor HTML. Sin embargo, si está utilizando su propia SVG, deberá asegurarse de que todos los elementos tengan identificaciones únicas.

02. Crea la primera línea de tiempo

GSAP ofrece dos tipos de línea de tiempo: timelinelite y timelinemax. La versión TimelineMax ofrece acceso a características adicionales, como la capacidad de repetir las animaciones, así como jugarlas a la inversa entre otras. Nuestra primera línea de tiempo será el agua, que repetiremos infinitamente y hacia atrás de un lado a otro. 

 var animation_water = nuevo timelinemax ({
  Repetir: -1,
  Yoyo: verdadero
});

03. Crea la primera animación.

Para animar el agua, tenemos otro camino en nuestra SVG, oculto con una opacidad '0'. Vamos a utilizar el morphsvg Plugin para transformar nuestra ruta de agua original en la nueva trayectoria de agua. Moveremos el elemento de agua '12px' hacia abajo en el eje y. Los dos números al final de la propiedad representan el retraso y las horas de inicio, respectivamente. 

 Animation_water
  .to ("# agua", 2, {
  Y: 12,
  MORPHSVG: "# Agua-2",
  Facilidad: lineal.easenone
  }, 0, 0)
;

04. Propiedades reutilizables

Dado que estaremos reutilizando una serie de propiedades y valores varias veces que vamos a crear variables para estas propiedades. 

 var animation_ase = linear.easenone;

05. Registro de consola

La biblioteca GSAP nos ofrece la capacidad de obtener una serie de propiedades de cualquier línea de tiempo determinada. Podemos registrarlos en la consola para asegurarse de que todo esté funcionando, ya que esperamos que lo haga. 

 Console.log (
  'Animation_water DURACIÓN:'
  + Animation_water.dure ()
  .tofixed (2)
);

06. Línea de tiempo y consola de la nube

Para cada elemento, deseamos animar por separado y constantemente, necesitamos crear una nueva línea de tiempo. También queremos registrar esa línea de tiempo en la consola a medida que avanzamos. 

 var animation_cloud = nuevo timelinemax ({
  Repetir: -1,
  Yoyo: cierto
});
console.log ('\ n' +
  ...
  animation_cloud.dure (). Tofixed (2) + '\ n'
);

07. Animación en la nube

Ahora que tenemos nuestra línea de tiempo lista, podemos crear nuestra animación en la nube. La sección de animación que toma las nuevas propiedades puede manejar múltiples pares de propiedades / valor separadas con comas.

Nuestra animación en la nube solo necesita ser sutil, por lo que solo necesitamos cambiar los valores por una pequeña cantidad. 

animación_cloud
  .to ("# nube", 3, {x: -2, y: 1, escala: 0.95, rotación: 1, facilidad: animación_ase}, 0, 0)
;

08. Crea la animación de la noche.

A continuación, comenzaremos a crear nuestra animación diurna. Crearemos una variable para el tiempo de ciclo y el día. El establecimiento 'Yoyo' en GSAP también nos permite retrasar la animación antes de repetir. 

 var day_night_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = nuevo timelinemax ({
  Repetir: -1,
  YOYO: VERDADERO,
  RepetDelay: Animation_Delay
});

09. Animar la capa de superposición

Dentro de nuestra SVG, tenemos una capa de superposición hecha de un rectángulo que cubre toda la imagen con el mismo gradiente de fondo que nuestro fondo de noche. La superposición aplica el modo de mezcla 'Multiplicar' para oscurecer toda la imagen. Nuestra animación simplemente hace pasar la opacidad de este elemento. 

 Animation_Tonight
  .to ('# noche-superposición',
  Day_night_cycle_time, {
  Opacidad: 1,
  facilidad: animacion_ase
  }
  , 0, 0)
;

10. Animar el gradiente

GSAP ofrece otros tejidos en la parte superior de los tipos comunes 'a' y 'de'. El tipo de Tween que necesitamos para animar nuestro gradiente es el paso 'Staggerto'. También podemos usar la propiedad 'ciclo' para rotar la rueda de color alrededor de nuestros nuevos valores. 

 .staggerto ('# Day Time Stop',
  Day_night_cycle_time, {
  ciclo:{
  STOPCOLOR: ['# 060414', '# 416584']
  },
  Facilidad: Animation_Ear,
}, 0, 0)

11. Animar el sol

Podemos seguir agregando animaciones a nuestra animación de 'esta noche'. Esta vez agregaremos un nuevo 'a' Tween para establecer nuestro sol. Estableceremos el tiempo de visualización para ser una fracción del tiempo de ciclo para animar el sol antes de la luna. GSAP nos permite establecer casi cualquier atributo. Usaremos esto para animar las propiedades 'CX' y 'CY' a debajo de la colina a la derecha. 

 .to ('# Sun', Day_Night_cycle_time / 1.25, {
  Escala: 0.9,
  ATTR: {CX: "753", CY: "697"},
  Facilidad: Animation_Ear}
, 0, 0)

12. Animar la luna

Usaremos la misma técnica que usamos para animar el sol fuera de la vista (vea el paso 11 anterior) para animar la luna en la vista. Podríamos lograr esto usando una Tween, por supuesto, pero para crear un arco falso que haremos esto está en dos partes. En ambas partes, también vamos a aplicar un nuevo valor a la propiedad de escala. 

 .to ('# luna', day_night_cycle_time / 2, {
  Escala: 0.9,
  ATTR: {CX: "174.5", CY: "202.5"},
  Facilidad: Animation_Ear}
, 0, 0)

La segunda parte de la animación de la Luna espera que la primera sección termine antes de que comience. NOTA: Estas dos partes de la animación lunar están encadenadas dentro del código de animación junto con las otras propiedades del día a la noche que estamos usando. 

 Animation_Tonight
  ...
  .to ('# luna', day_night_cycle_time / 2, {
  Escala: 0.9,
   attr: {cx: "410.5", CY: "114.5"},
  Facilidad: Animation_Ear}
  , day_night_cycle_time / 2, 0)
;

13. Animar las estrellas

La única parte a la izquierda de nuestra animación diurna a la noche son las estrellas. Animaremos las estrellas en vista de la transición de una serie de propiedades. El primero de ellos es simplemente llevarlos a la vista animando su opacidad. 

 .to ('# estrellas', day_night_cycle_time / 2,
  {opacidad: 1},
  Day_night_cycle_time / 2,
0)

A continuación, usaremos el paso 'desde' para mover las estrellas y gírelas de un ángulo negativo a medida que se animan a la vista. Estamos usando algunas matemáticas simples para calcular nuestro tiempo de animación y retraso, todos en función de nuestra variable 'Day_night_Cycle_Time'. 

 .desfrom ("# estrellas",
  Day_night_cycle_time - (Day_night_cycle_time / 4),
  {Y: 150, Rotación: -15, Facilidad: Animation_Ease},
  Day_night_cycle_time / 4,
0)

14. Crea la línea de tiempo de las estrellas y el registro de la consola.

Ahora hemos creado nuestra animación diaria, podemos crear otra animación constante para que nuestras estrellas parpadeen. Crearemos la nueva línea de tiempo y luego registraremos la duración de la línea de tiempo en la consola. 

 var animation_stars = nuevo timelinemax ({
  Repetir: -1,
  Yoyo: cierto
});

15. Haz que las estrellas parpadeen

Ahora, hemos creado la línea de tiempo lista para la animación, necesitamos crear nuestra animación parpadeante. La animación es realmente simple: todo lo que queremos hacer es reducir el valor de opacidad. Gracias a la propiedad 'Yoyo', la opacidad se animará y se apagará y así hará que las estrellas se vean como si estuvieran parpadeando. 

 Animation_Stars
  .to ("# estrellas", 0.5,
  {opacidad: 0.5, facilidad: animation_ase}
, 0, 0)
;

dieciséis. Retrasar el parpadeo

En el último paso, nos dirigimos a los grupos de estrellas para aplicar nuestra animación parpadeante, sin embargo, se vería mucho mejor si las estrellas parpadean a parpadear una a la vez en lugar de juntas al mismo tiempo. Logramos esto apuntando a cada estrella por separado y aplicando una animación diferente. 

 Animation_Stars
  ...
  .to ("# star-two", 0.5,
  {opacidad: 0.5, facilidad: animation_ase}
  , 1.25, 0)
  .to ("# star-tres", 0.5,
  {opacidad: 0.5, facilidad: animation_ase}
  , .75, 0)
  ...;

17. Agregar nieve

¡Eso es! Nuestra animación de ciclismo día a noche está terminada y parece increíble, pero no tenemos que detenernos allí. Dado que la imagen está en SVG, podemos agregar fácilmente nuevos elementos a nuestro paisaje. Vamos a agregar algo de nieve. Haremos esto usando dos capas separadas. Cada capa tiene una colección de elipses lo suficientemente grandes como para cubrir el paisaje y luego la misma colección se repitió anteriormente. 

 & lt; g id = "Snow-Fit-Layer" ... & gt;
  ...
  & lt; Ellipse ... / & gt;
& lt; / g & gt;
& lt; g id = "Snow-top-Layer" ... & gt;
  ...
  & lt; Ellipse ... / & gt;
& lt; / g & gt;

18. Crea las líneas de nieve de la nieve

Creamos dos líneas de tiempo separadas para nuestra nieve para poder animarlas sobre diferentes duraciones. También registraremos sus duraciones a la consola. 

 var animation_snowtop = nuevo timelinemax ({
  Repetir: -1,
  Repetddelay: 0
});
var animation_snowbottom = nuevo timelinemax ({
  Repetir: -1,
  Repetddelay: 0
});

19. Animar la nieve

Para animar nuestras capas de nieve, queremos mover las dos capas a lo largo del eje vertical. Al diferenciar sus duraciones, obtendremos la apariencia de las capas que se movieron a diferentes velocidades. La animación funciona moviendo la colección de elipses a lo largo del eje vertical hasta que la segunda colección esté en su lugar de la primera. Luego repitimos la animación. 

 Animation_snow
  .to ("# # Snow-Layer", 7,
  {attr: {transformar: "traducir (24 -108)"}
  , Facilidad: Animation_Ear}
, 0, 0)
;

Encuentra la colección completa de bolígrafos tutoriales. aquí . ¿Necesitas un lugar seguro para guardar tus archivos? Ver nuestra guía para almacenamiento en la nube .

Este artículo se publicó originalmente en Creative Web Design Magazine Web Designer. Suscríbete al diseñador web aquí .

Artículos relacionados:

  • 5 APIES ANTES DE JAVASCRIPT
  • 19 ejemplos de animación de CSS fresco para recrear
  • Los 25 mejores videos de música animada.

Cómo - Artículos más populares

Cómo dibujar animales: 15 puntas principales

Cómo Feb 6, 2026

(Crédito de la imagen: Aaron Blaise) Aprender a dibujar animales es una parte integral de la ilustración. Desde esc..

Ilustración de mapa: una guía paso a paso

Cómo Feb 6, 2026

El ejemplo del mapa ha tenido un verdadero resurgimiento en los últimos años. Una alternativa emocionante a un mapa de Google seco, los mapas ilustrados se pueden llenar con caracteres y de..

Cómo agregar animación a SVG con CSS

Cómo Feb 6, 2026

[dieciséis] [Imagen: Diseñador web] Cuando se trata de animar con SVGS, un desvío importante puede ser la idea de atascarse..

Construye un chatbot AI-Powered

Cómo Feb 6, 2026

[dieciséis] Inteligencia artificial (AI) nos permite crear nuevas formas de ver los problemas existentes, de repensar estrategias ambi..

Haga que su aplicación trabaje fuera de línea con los trabajadores de servicio

Cómo Feb 6, 2026

[dieciséis] Página 1 de 2: Página 1: Cargando más rápido Página 1: Cargando más rá..

Diseñador de afinidad: Cómo usar el Pixel Persona

Cómo Feb 6, 2026

[dieciséis] El diseñador de afinidad es una herramienta popular de edición de vectores para Mac, Windows y ahora ipad . L..

4 sencillos pasos para mejorar su render

Cómo Feb 6, 2026

[dieciséis] El uso de luces de domo ha sido uno de los mayores avances en la creación de CGI en las últimas décadas. Bañar una esc..

Crea un efecto de salpicaduras en RealFlow

Cómo Feb 6, 2026

Página 1 de 2: Página 1 Página 1 Página 2 En este artículo, vo..

Categorías