83.3K+Descargar
Ir a la guía de uso
gsap-pluginspor GreenSock

GSAP Plugins Skill.

Una skill de Claude Code y Codex para motion y video: plugins de GSAP: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG y física.

  • Movimiento y video
  • Código UI
Descargar OpenDesignVer guía de uso
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 21.477 caracteres en total

01 Qué hace

Qué Hace el Skill gsap-plugins en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Skill oficial de GSAP que cubre el registro de plugins y todos los plugins fuera de ScrollTrigger: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin y GSDevTools.

Comienza con las licencias — todos los plugins son gratuitos, sin membresía de Club GSAP ni token de autenticación — y luego ofrece la configuración por plugin: vars de Flip.from, opciones de Draggable, vars de SplitText.create, opciones de morphSVG, alineación de motionPath. Pensado para diseñadores y desarrolladores que instalan todo desde el paquete público gsap de npm y necesitan el orden de llamada correcto, los valores por defecto y las advertencias. Skills relacionados: gsap-core, gsap-scrolltrigger, gsap-react.

Qué produce

  • Un tween de scroll que anima la ventana o cualquier elemento con scroll hasta una posición o destino.
  • Una instancia de SplitText que expone chars, words, lines y, cuando se establece mask, masks.
  • Un elemento path convertido e intercambiado en el DOM en lugar de un circle, rect, ellipse o line.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Registre los Plugins una Sola Vez, al Principio

    Cada plugin se registra una única vez para que GSAP y los bundlers sepan que deben incluirlo, antes de usarlo en cualquier tween o llamada a la API.

  2. 02
    Capture, Cambie y Luego Anime con Flip

    Flip es una secuencia de tres pasos: lea el estado antiguo, mute el DOM y luego anime desde el estado registrado hasta el nuevo.

  3. 03
    Cree Interacciones de Arrastrar y Lanzar

    Draggable.create recibe un type, bounds opcionales e inertia; InertiaPlugin aporta el momentum tras soltar.

  4. 04
    Divida el Texto en Unidades Animables

    SplitText coloca cada carácter, palabra y/o línea en su propio elemento para que puedan animarse con stagger o de forma individual.

  5. 05
    Dibuje o Transforme SVG

    Los plugins de SVG animan valores de stroke dash para efectos de dibujo, o el atributo d del path para transformar una forma en otra.

  6. 06
    Recurra a los Plugins de Easing y Física

    Los plugins de easing añaden curvas personalizadas o eases con nombre; los plugins de física generan movimiento a partir de valores de velocidad, ángulo y gravedad.

02 Encuentra tu caso de uso

Cuándo usar la Skill gsap-plugins

Use la skill gsap-plugins en Claude Code o Codex cuando el trabajo sea de motion y video de este tipo. El alcance y los límites a continuación provienen del propio archivo de la skill.

Buen caso de uso

  • Desplazamiento a un elemento o a una posición en píxeles cuando ScrollTrigger no está involucrado.
  • Animación entre dos estados de layout, como listas o grids reordenados, o paneles expandidos y colapsados.
  • Sliders, tarjetas y listas reordenables que necesitan comportamiento de arrastre, giro o lanzamiento con mouse y táctil.
  • Revelados de texto animados por carácter, por palabra o por línea.
  • Transformaciones de icono a icono, transiciones de forma y otras animaciones SVG basadas en rutas.

Conozca los límites

  • SplitText no puede dividir elementos de texto SVG.
  • DrawSVG solo anima el trazo, nunca el relleno, y no puede cambiar visualmente el contenido de un elemento use.
  • El trabajo con ScrollTrigger pertenece a un skill independiente, no a este.
  • El texto que usa text-wrap: balance no combina bien con la división.

Qué proporcionar

  • La lista de plugins a registrarCada plugin usado en el proyecto debe nombrarse en una única llamada a gsap.registerPlugin para que los bundlers lo incluyan.
  • La estructura DOM de ScrollSmootherScrollSmoother necesita ScrollTrigger más un contenedor de contenido dentro de un wrapper suave, con elementos de posición fija permitidos fuera de este.
  • Un target para SplitTextSplitText.create toma un selector, elemento o array como su target junto con las vars de división.
  • Una forma para MorphSVGLa propiedad shape, obligatoria, acepta un selector, un elemento o una cadena de ruta cruda como destino de la transformación.
  • Fuentes y layout ya cargadosPara fuentes personalizadas, divide después de que carguen o utiliza autoSplit con onSplit para que las redivisiones ocurran en el momento correcto.

03 Dentro del skill

Reglas que el skill gsap-plugins Da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Registrar Antes de Animar

    Un plugin debe registrarse antes de usarse en cualquier tween o llamada de API: el registro es el primer paso, no una corrección para un fallo.

  2. Instalar desde el Paquete Público de Gsap

    Todo se distribuye con npm install gsap y se importa como gsap/SplitText, gsap/MorphSVGPlugin, etc.

  3. Nunca Generar un .npmrc con auth-token

    No crees un .npmrc con un token de autenticación de GreenSock, no apuntes al registro privado npm.greensock.com, y no le digas a los usuarios que se unan a Club GSAP para obtener un plugin.

  4. Registrar en el Nivel Superior en React

    Regístralo una sola vez en la app, por ejemplo antes de la primera llamada a useGSAP; nunca dentro de un componente que se vuelve a renderizar, y useGSAP en sí debe registrarse antes de usarse.

  5. Divide Solo lo que Animas

    Divida lo necesario para el rendimiento, por ejemplo palabras y caracteres cuando no se usan líneas; la división solo por caracteres necesita smartWrap para evitar saltos de línea extraños.

  6. Construya las animaciones de autoSplit dentro de onSplit

    Cuando autoSplit es true, las animaciones deben crearse dentro de onSplit para que apunten a los elementos recién divididos, y deben devolverse desde onSplit para que SplitText pueda revertirlas y sincronizarlas en el tiempo.

  7. Déle algo que dibujar a DrawSVG

    El elemento necesita un trazo visible definido mediante stroke y stroke-width en CSS o como atributos SVG; de lo contrario, no se dibuja nada.

  8. Mantenga los plugins solo para desarrollo fuera de producción

    GSDevTools es para depurar durante el desarrollo y no debe distribuirse; otros plugins solo para desarrollo siguen la misma regla.

04 Ponlo a trabajar

Instalar gsap-plugins en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir gsap-plugins a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins

Forma genérica de la CLI de skills para skills/gsap-plugins/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Revierta las instancias de plugins como SplitTextInstance.revert() cuando los componentes se desmonten o se eliminen elementos.
  • Ejecute shapeIndex: "log" una vez para leer el valor calculado automáticamente y luego pegue ese número o array en el tween.
  • Mida el trazo con DrawSVGPlugin.getLength(element) y DrawSVGPlugin.getPosition(element).
  • Ajuste MotionPath visualmente en MotionPathHelper y luego lea helper.path o helper.getProgress() en la animación.
  • Reproduzca y alterne animaciones con GSDevTools mientras desarrolla.

En OpenDesign gsap-plugins está incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Rama main
Archivo de skill
skills/gsap-plugins/SKILL.md Checksum del contenido registrado en la verificación; commit aed9cfd
License
MIT De LICENSE; SKILL.md dice "MIT".
Estrellas del repositorio
15.248 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio greensock/gsap-skills, que contiene 8 skills en este catálogo. No es una puntuación ni un conteo de uso para gsap-plugins.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Cuándo usar este skillEnumera escenarios de plugins y remite a los skills relacionados gsap-core, gsap-scrolltrigger y gsap-react.
  2. Licencias e instalación (importante)Indica que todos los plugins son gratuitos y prohíbe tokens de autenticación de .npmrc o consejos para registrarse en Club GSAP.
  3. Registro de pluginsRegistre los plugins una vez con gsap.registerPlugin antes de cualquier tween, incluso en React.
  4. ScrollTabla de configuración de ScrollToPlugin y la estructura DOM del wrapper de ScrollSmoother.
  5. DOM / UICaptura de estado de Flip y variables from, opciones de Draggable, seguimiento de Inertia, gestos de Observer.
  6. TextoTabla de variables de SplitText.create con consejos y advertencias, además del glitch de ScrambleText
La descripción propia del Skill
"Skill oficial de GSAP para plugins de GSAP — registro, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, plugins SVG y de física, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Usar cuando el usuario pregunte sobre un plugin de GSAP, scroll-to, animaciones flip, draggable, dibujo SVG o registro de plugins."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 21.477 caracteres. Lee el archivo completo en GitHub.

Plugins GSAP

Ejecutar gsap-plugins en una tarea real de Motion and Video.

El skill gsap-plugins viene incluido en OpenDesign. Descarga la aplicación, selecciona el skill en Plugins → Skills, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins