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

Using GreenSock Animation Platform (GSAP) in Astro with View Transitions: A Step-by-Step Guide

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

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior

Tabla de contenido

Crear una nueva aplicación Astro
Integre la plataforma de animación GreenSock (GSAP) en su proyecto Astro
[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:

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:

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:

npm install gsap

El comando instala la siguiente biblioteca:

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

Crear un componente de diseño compartido con transiciones de vista y GSAP

Para usar GSAP en varias páginas de su aplicación Astro con ViewTransitions habilitado, cree un diseño compartido para ahorrar el tiempo de repetir el mismo código en cada página. Cree un archivo llamado Layoutastro en el directorio src con lo siguiente código:

---
import { ViewTransitions } from "astro:transitions";
---
// [!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} />
    <ViewTransitions />
    <title>Astro</title>
    <style is:global>
      .box {
        width: 100px;
        height: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <slot />
    <script>
      import gsap from "gsap";
      window.gsap = gsap;
    </script>
  </body>
</html>

En el código anterior, has hecho lo siguiente para poder reutilizar gsap en todas partes:

Importé ViewTransitions y lo usé dentro de la etiqueta <html lang="en"> para actualizar el contenido de su página sin la navegación normal de página completa del navegador. refrescar
Definí un CSS para crear visualmente una caja negra de 100x100.
Importé el módulo gsap y lo hice accesible dentro de la ventana. Así que ahora, en cualquier página incluida en este diseño, podrá llamar a gsapto y esperar que funcione como está incluso en un script en línea Tenga en cuenta que los scripts incluidos se ejecutan solo una vez cuando Ver transiciones está habilitada. Esto es útil para usted ya que no necesitaría importar ni cargar el módulo gsap en cada página

Como sugirió correctamente Giulio Zanchetta, actualice src/envdts para garantizar la compatibilidad con los tipos gsap en todas las páginas en cualquier parte de la etiqueta del script:

/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
interface Window { // [!code focus]
  gsap: typeof import("gsap");
}

Utilice GSAP en varias páginas

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

Primero, creemos el cuadro y la casilla de verificación en la ruta de índice predeterminada. En esta página, animará el cuadro de izquierda a derecha cuando la casilla de verificación esté activada. Reemplace el código existente en el archivo src/pages/indexastro con lo siguiente:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
  <h1>Astro</h1>
  <input type="checkbox" />
  <div class="box"></div>
  <a href="/second">Click Me</a>
</Layout>

En el código anterior, creó una casilla de verificación y un elemento div que representa el cuadro. Además, agregó un hipervínculo a la ruta / second

Ahora, crea un segundoastro en el directorio src/pages con el siguiente código donde animarás el cuadro hacia arriba y hacia abajo cuando la casilla de verificación esté activada:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
  <h1>Astro</h1>
  <input type="checkbox" />
  <div class="box"></div>
  <a href="/">Click Me</a>
</Layout>

En el código anterior, creó una casilla de verificación y un elemento div que representa el cuadro. Además, agregó un hipervínculo a la ruta /

Ahora, para animar el cuadro usando GSAP cada vez que se hace clic en la casilla de verificación, realice las siguientes adiciones en una de las rutas:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
  <h1>Astro</h1>
  <input type="checkbox" />
  <div class="box"></div>
  <a href="/second">Click Me</a>
  <script>
    document.addEventListener(
      "astro:page-load",
      () => {
        const element = document.querySelector('[type="checkbox"]');
        element?.addEventListener("change", () => {
          if (element.checked) gsap.to(".box", { x: 200 });
          else gsap.to(".box", { x: 0 });
        });
      },
      { once: false }
    );
  </script>
</Layout>

y el siguiente cambio en la otra ruta:

---
import Layout from "../Layout.astro";
---
// [!code focus]
<Layout>
  <h1>Astro</h1>
  <input type="checkbox" />
  <div class="box"></div>
  <a href="/">Click Me</a>
  <script>
    document.addEventListener(
      "astro:page-load",
      () => {
        const element = document.querySelector('[type="checkbox"]');
        element?.addEventListener("change", () => {
          if (element.checked) gsap.to(".box", { y: 200 });
          else gsap.to(".box", { y: 0 });
        });
      },
      { once: false }
    );
  </script>
</Layout>

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

Tenga en cuenta que el detector de eventos change está incluido en el siguiente código:

document.addEventListener(
  "astro:page-load",
  () => {
  },
  { once: false }
);

El código anterior garantiza que cada vez que se visita la página que la contiene, ya sea durante la navegación o como primera carga, se ejecuta en el navegador. Por lo tanto, para adjuntar el oyente en el elemento del cuadro después de navegar a una nueva página o cuando se accede directamente a una página. cargado, el evento astro:page-load es útil. Además, usar once: false garantiza que el código interno sea re -se ejecuta si la página se visita varias veces durante una sesión

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:

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 con View Transitions habilitado

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

Créditos

Gracias a Martin por una revisión detallada y sugerencias de correcciones en este artículo.