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/
Publicar un comentario