--- title: "Uso de la plataforma de animación GreenSock (GSAP) en Astro: una guía paso a paso" description: "¿Cómo utilizar GSAP (Plataforma de animación GreenSock) en la aplicación Astro?" source: "https://www.launchfa.st/es/blog/gsap-astro" author: "Rishi Raj Jain" created_at: 2024-04-15T00:00:00.000Z --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. Using GreenSock Animation Platform (GSAP) in Astro 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: - [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior ## Tabla de contenido - [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro) - [Integre la plataforma de animación GreenSock (GSAP) en su proyecto Astro](#integrar-plataforma-de-animación-greensock-gsap-en-su-proyecto-astro) - [Instalar el SDK de la plataforma de animación GreenSock (GSAP)](#install-greensock-animation-platform-gsap-sdk) - [Usar GSAP en la ruta de índice](#use-gsap-en-la-ruta-de-índice) - [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente) ## Crea una nueva aplicación Astro Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando: ```bash 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 - `Sí` cuando se le pregunte si planea escribir Typecript - `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript. - `Sí` cuando se le solicita instalar dependencias - `Sí` cuando se le solicita inicializar un repositorio de git Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación: ```bash cd my-app npm run dev ``` La aplicación debería estar ejecutándose en [localhost:4321](http://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: ```bash 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`: ```astro {12-18,22-23} --- // File: src/pages/index.astro // [!code focus] --- // [!code focus] Astro

Astro

``` 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: ```astro --- // File: src/pages/index.astro // [!code focus] --- Astro

Astro

// [!code focus] // [!code ++] ``` 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: ```astro --- // File: src/pages/index.astro // [!code focus] --- Astro

Astro

``` 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: ```bash 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](https://twitter.com/direct_messages/create/rishi_raj_jain_)