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
¡Hola! Nos alegra mucho que hayas llegado hasta aquí y que estés leyendo este artículo en Edeptec.
Este formulario es un espacio abierto para ti: puedes dejar un comentario con tus dudas, sugerencias, experiencias o simplemente tu opinión sobre el tema tratado.
» ¿Te resultó útil la información?
» ¿Tienes alguna experiencia personal que quieras compartir?
» ¿Se te ocurre algún tema que te gustaría ver en próximos artículos?
Recuerda que este espacio es para aprender y compartir, por eso te animamos a participar de manera respetuosa y constructiva. Tus comentarios pueden ayudar a otros lectores que están en el mismo camino, ya sea en electrónica, programación, deportes o tecnología.
¡Gracias por ser parte de esta comunidad de aprendizaje! Tu participación es lo que hace crecer este proyecto.