▷ Animar un SVG con GSAP

Aprende a dar vida a tus gráficos SVG utilizando GSAP (GreenSock Animation Platform), una de las bibliotecas de animación más poderosas y fáciles de usar. En este tutorial paso a paso, te enseñaremos cómo aplicar animaciones a elementos SVG como líneas, formas y figuras complejas. Descubrirás cómo controlar el tiempo, velocidad y efectos de tus animaciones, creando transiciones fluidas y dinámicas que mejoran la interactividad de tus proyectos web. Ideal para desarrolladores que buscan añadir un toque creativo y profesional a sus sitios con animaciones de alto rendimiento.

Aquí les dejo un enlace a un post anterior en donde explico como vectorizar una imagen.

Cargando GSAP

Vamos a  cargar GSAP utilizando esta etiqueta:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

Copiamos y pegamos el código, dentro de la etiqueta <head></head>

Podemos animar el svg en conjunto o vector por vector.

Animar svg en conjunto.

La animación del svg en conjunto la vamos a realizar seleccionando el id de la etiqueta <svg>, en este caso el id de esta etiqueta es: id = "svg9"

Ejemplo de animación de svg en conjunto:

See the Pen Animar svg con jsap by Esteban Carrillo (@estebancarrillog) on CodePen.

Animar SVG vector por vector:

La animación del svg vector por vector la vamos a realizar seleccionando la clase de las etiquetas <path>, en este caso las clase de estas etiquetas es: class = "svg-elem"

Ejemplo de animación de svg vector por vector:

See the Pen Untitled by Esteban Carrillo (@estebancarrillog) on CodePen.

En los ejemplos de CODEPEN pueden revisar los códigos de HTML, CSS y JavaScript

Para información mas detallada de GSAP: funcionamiento, propiedades y características. Les dejo el siguiente link: https://greensock.com/get-started/

0/Post a Comment/Comments