Ejercicios Prácticos para el Capítulo 3

¡Bien hecho por completar el Capítulo 3! Para consolidar tu comprensión de los principios básicos de la animación de GSAP, aquí tienes algunos ejercicios prácticos. Estas tareas te desafiarán a aplicar los conceptos de tweens, líneas de tiempo y easing en varios escenarios. Intenta trabajar en estos ejercicios por tu cuenta primero, luego consulta las soluciones para obtener orientación e información adicional.

Ejercicio 1: Crea una Animación Escalonada

Anima una serie de cinco elementos div que ingresen a la pantalla desde la izquierda, uno tras otro, de manera escalonada.

Solución:
HTML:

<div class="staggered" style="background:red;"></div>
<div class="staggered" style="background:blue;"></div>
<div class="staggered" style="background:green;"></div>
<div class="staggered" style="background:yellow;"></div>
<div class="staggered" style="background:purple;"></div>

CSS:

.staggered {
    width: 50px;
    height: 50px;
    position: absolute;
    left: -60px;
}

JavaScript:

gsap.to(".staggered", {duration: 1, x: 100, stagger: 0.2});

Ejercicio 2: Animar un Elemento con Easing Personalizado

Crea una animación donde un elemento se mueva a lo largo de la pantalla con una función de easing personalizada que comience lentamente, acelere y luego disminuya la velocidad al final.

Solución:
HTML:

<div id="customEase"></div>

CSS:

#customEase {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
}

JavaScript:

gsap.registerPlugin(CustomEase);

CustomEase.create("myCustomEase", "M0,0 C0.128,0.572 0.237,1.001 0.5,1 0.763,0.999 0.847,0.572 1,0");
gsap.to("#customEase", {duration: 3, x: 300, ease: "myCustomEase"});

Ejercicio 3: Controlar la Reproducción de la Animación con Clics en Botones

Crea dos botones para controlar la reproducción de una animación: uno para reproducir la animación y otro para revertirla.

Solución:
HTML:

<button id="play">Play</button>
<button id="reverse">Reverse</button>
<div id="playControl"></div>

CSS:

#playControl {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
}

JavaScript:

let anim = gsap.to("#playControl", {duration: 2, x: 200, paused: true});

document.getElementById("play").addEventListener("click", function() {
  anim.play();
});

document.getElementById("reverse").addEventListener("click", function() {
  anim.reverse();
});

Estos ejercicios están diseñados para fortalecer tu comprensión de los principios fundamentales de GSAP y fomentar la exploración creativa. Trabajar en estos desafíos no solo mejorará tus habilidades técnicas, sino que también estimulará tu imaginación en el uso de GSAP para animaciones web. Recuerda, la práctica es clave para dominar cualquier habilidad, y GSAP no es una excepción. Sigue experimentando con diferentes animaciones y pronto estarás creando animaciones fluidas, dinámicas e interactivas con facilidad y confianza.