Ejercicios Prácticos para el Capítulo 1

¡Excelente trabajo al completar el primer capítulo! Para reforzar tu comprensión y habilidades, aquí tienes algunos ejercicios prácticos relacionados con los temas que hemos cubierto. Cada ejercicio está diseñado para desafiarte un poco más que el anterior, y se proporcionan soluciones para guiarte si te quedas atascado. Recuerda, la mejor manera de aprender es haciendo, ¡así que sumérgete!

Ejercicio 1: Animación Básica al Pasar el Ratón

Crea un botón con un efecto al pasar el ratón utilizando GSAP. Cuando el usuario pase el ratón sobre el botón, debería cambiar su color suavemente y aumentar ligeramente su escala.

Solución:
HTML:

<button id="hoverButton">Hover over me!</button>

CSS:

#hoverButton {
    padding: 10px 20px;
    background-color: #008CBA;
    color: white;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out; /* For a smooth scale transition */
}

JavaScript:

const hoverBtn = document.getElementById("hoverButton");
gsap.to(hoverBtn, {
    duration: 0.3,
    backgroundColor: "#00FF00",
    scale: 1.2,
    paused: true
}).eventCallback("onEnter", () => hoverBtn.style.transform = "scale(1.2)")
  .eventCallback("onLeave", () => hoverBtn.style.transform = "scale(1)");

hoverBtn.addEventListener("mouseenter", () => gsap.globalTimeline.play());
hoverBtn.addEventListener("mouseleave", () => gsap.globalTimeline.reverse());

Ejercicio 2: Animar una Caja en Movimiento

Crea un elemento <div> y usa GSAP para moverlo por la pantalla de izquierda a derecha, luego de vuelta a su posición original.

Solución:
HTML:

<div class="movingBox"></div>

CSS:

.movingBox {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}

JavaScript:

gsap.to(".movingBox", {duration: 2, x: 300, yoyo: true, repeat: -1});

Ejercicio 3: Crear una Animación de Barra de Carga

Anima un elemento <div> para simular una barra de carga. El ancho del div debe expandirse desde 0% hasta 100% en 5 segundos.

Solución:
HTML:

<div class="loadingBar"></div>

CSS:

.loadingBar {
    width: 0%;
    height: 20px;
    background-color: blue;
    position: relative;
}

JavaScript:

gsap.to(".loadingBar", {duration: 5, width: "100%"});

Ejercicio 4: Rotar un Elemento

Crea un SVG de una forma simple (como un círculo o un cuadrado) y utiliza GSAP para hacer que rote continuamente 360 grados.

Solución:
HTML:

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" class="circle" />
</svg>

JavaScript:

gsap.to(".circle", {duration: 2, rotation: 360, repeat: -1, ease: "none"});

Estos ejercicios están diseñados para reforzar los conceptos clave de animación web utilizando GSAP que hemos cubierto en este capítulo. Al trabajar en estos desafíos, deberías adquirir una comprensión más profunda de los conceptos básicos de GSAP y cómo se puede utilizar para crear animaciones web atractivas. No dudes en modificar los ejercicios y experimentar por tu cuenta: la mejor manera de aprender es a través de la práctica y la exploración.