Ejercicios Prácticos para el Capítulo 2

¡Fantástico trabajo al completar el Capítulo 2! Para solidificar tu comprensión y habilidades en GSAP, aquí tienes algunos ejercicios prácticos. Cada ejercicio está diseñado para desafiarte mientras refuerzas los conceptos aprendidos en este capítulo. Se proporcionan soluciones para guiarte, pero te animo a intentar resolverlos por tu cuenta primero. Recuerda, ¡la experimentación es clave para dominar GSAP!

Ejercicio 1: Anima una Secuencia de Elementos

Crea una secuencia de animación donde tres elementos diferentes (divs) se muevan por la pantalla uno tras otro, no simultáneamente.

Solución:
HTML:

<div class="sequence" id="elem1"></div>
<div class="sequence" id="elem2"></div>
<div class="sequence" id="elem3"></div>

CSS:

.sequence {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    margin: 10px;
}

JavaScript:

let tl = gsap.timeline();
tl.to("#elem1", {duration: 1, x: 100})
  .to("#elem2", {duration: 1, x: 100})
  .to("#elem3", {duration: 1, x: 100});

Ejercicio 2: Crea una Animación en Bucle

Haz que un elemento rote continuamente 360 grados en un bucle.

Solución:
HTML:

<div id="loopingElement"></div>

CSS:

#loopingElement {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
}

JavaScript:

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

Ejercicio 3: Construir un Banner de Página de Aterrizaje Animado

Crea un banner de página de aterrizaje donde varios elementos (texto, imágenes, formas) entren desde diferentes direcciones, creando una animación introductoria atractiva.

Solución:
HTML:

<div id="banner">
    <h1 id="title">Welcome!</h1>
    <img id="image" src="path/to/image.jpg" alt="Banner Image">
    <p id="description">Your description here.</p>
</div>

CSS:

#banner {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #eee;
}
#title, #image, #description {
    position: absolute;
    opacity: 0;
}

JavaScript:

let bannerTl = gsap.timeline();
bannerTl.from("#title", {duration: 1, x: -200, opacity: 1})
        .from("#image", {duration: 1, y: -200, opacity: 1}, "-=0.5")
        .from("#description", {duration: 1, x: 200, opacity: 1}, "-=0.5");

Ejercicio 4: Entrada Escalonada de una Lista

Anima una lista de elementos para que aparezcan uno tras otro con un ligero retraso entre cada uno, creando un efecto de entrada escalonada.

Solución:
HTML:

<ul id="myList">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

CSS:

.item {
    opacity: 0;
    transform: translateX(-50px);
}

JavaScript:

gsap.to(".item", {duration: 1, opacity: 1, x: 0, stagger: 0.2});

Estos ejercicios están diseñados para brindarte una experiencia práctica en la creación de una variedad de animaciones con GSAP. Al trabajar en estos desafíos, obtendrás una comprensión más profunda de cómo funciona GSAP y cómo aplicar sus funciones de manera creativa. Recuerda, la clave para dominar GSAP es la práctica y experimentación. Por lo tanto, siéntete libre de modificar estos ejercicios, experimentar con diferentes animaciones y ver qué increíbles creaciones puedes lograr.