Uso de la plataforma de animación GreenSock (GSAP) en Astro: una guía paso a paso
LaunchFast Logo LaunchFast

Uso de la plataforma de animación GreenSock (GSAP) en Astro: una guía paso a paso

Rishi Raj Jain
Using GreenSock Animation Platform (GSAP) in Astro: A Step-by-Step Guide

En esta guía, aprenderá cómo usar GreenSock Animation Platform (GSAP) en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar el módulo gsap y animar un cuadro de texto según el estado de una casilla de verificación.

Requisitos previos

Necesitará lo siguiente:

Tabla de contenido

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

Terminal window
npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

  • Empty cuando se le pregunta cómo iniciar el nuevo proyecto
  • cuando se le pregunte si planea escribir Typecript
  • Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
  • cuando se le solicita instalar dependencias
  • cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

Terminal window
cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

Ahora, pasemos a integrar GSAP en su aplicación Astro.

Integre la plataforma de animación GreenSock (GSAP) en su proyecto Astro

Instalar el SDK de la plataforma de animación GreenSock (GSAP)

Ejecute el siguiente comando para instalar el paquete necesario para usar GSAP:

Terminal window
npm install gsap

El comando instala la siguiente biblioteca:

  • gsap: una biblioteca de animación JavaScript independiente del marco

Utilice GSAP en la ruta de índice

Para demostrar el uso de GSAP, animará un cuadro hacia la izquierda y hacia la derecha según el estado marcado de una casilla de verificación.

Primero, creemos el cuadro y la casilla de verificación en la ruta de índice predeterminada. Realice las siguientes adiciones en el archivo src/pages/indexastro:

---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style>
.box {
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<h1>Astro<h1/>
<input type="checkbox" />
<div class="box"></div>
</body>
</html>

Entonces ahora podrá ver un cuadro negro y una casilla de verificación encima. Importemos el módulo gsap en la ruta de índice mediante las siguientes adiciones:

---
// File: src/pages/index.astro // [!code focus]
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style>
.box {
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<h1>Astro<h1/>
<input type="checkbox" />
<div class="box"></div>
<script> // [!code focus] // [!code ++]
import gsap from "gsap"; // [!code focus] // [!code ++]
</script> // [!code focus] // [!code ++]
</body>
</html>

y ahora solo te queda un paso, es decir, animar el cuadro usando GSAP cada vez que se hace clic en la casilla de verificación. Hagamos las siguientes adiciones en la ruta del índice y entendamos lo que hacen:

---
// File: src/pages/index.astro // [!code focus]
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
<style>
.box {
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<h1>Astro<h1/>
<input type="checkbox" />
<div class="box"></div>
<script>
import gsap from "gsap";
const element = document.querySelector( // [!code focus] // [!code ++]
'[type="checkbox"]' // [!code focus] // [!code ++]
) as HTMLInputElement; // [!code focus] // [!code ++]
element?.addEventListener("change", () => { // [!code focus] // [!code ++]
if (element.checked) gsap.to(".box", { x: 200 }); // [!code focus] // [!code ++]
else gsap.to(".box", { x: 0 }); // [!code focus] // [!code ++]
}); // [!code focus] // [!code ++]
</script>
</body>
</html>

En las adiciones anteriores, ha creado un detector de eventos para el evento “cambio” de la casilla de verificación. Este evento se activa cada vez que la casilla de verificación está marcada o desmarcada. Además, dependiendo del estado de la casilla de verificación, puede animar el botón para que se mueva. 200 unidades a la derecha, o regresar a su posición original

Cree y pruebe su aplicación Astro localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

Terminal window
npm run build && npm run preview

Conclusión

En esta guía, aprendió cómo usar GreenSock Animation Platform (GSAP) en una aplicación Astro.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter

Learn More Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024
Schneller Start con Astro 4.16
Schneller Start con Astro 4.16 October 23, 2024