iurymagano/portfolio-next

Plugins GSAP

Cuándo Usar Este Skill

Aplícalo al usar o revisar código que utilice plugins de GSAP: registrar plugins, scroll-to, animaciones flip/FLIP, elementos arrastrables, SVG (DrawSVG, MorphSVG, MotionPath), texto (SplitText, ScrambleText), física, plugins de easing (CustomEase, EasePack, CustomWiggle, CustomBounce) o GSDevTools. ScrollTrigger tiene su propio skill (gsap-scrolltrigger).

Skills relacionados: Para tweens básicos usa gsap-core; para ScrollTrigger usa gsap-scrolltrigger; para React usa gsap-react.

Licencia e Instalación (importante)

Cada plugin de GSAP es gratuito, incluso para uso comercial. Desde la adquisición de GSAP por Webflow, Club GSAP ya no es un nivel de pago y ningún plugin requiere membresía, clave de licencia o token de autenticación — esto incluye plugins que antes eran solo de Club (SplitText, MorphSVG, etc.).

• ✅ Instala todo desde el paquete público gsap de npm: npm install gsap. Todos los plugins están incluidos — impórtalos como gsap/SplitText, gsap/MorphSVGPlugin, etc.
• ❌ No generes un .npmrc con un token de autenticación de GreenSock, sugieras el registro privado npm.greensock.com ni digas a los usuarios que se registren en Club GSAP para acceder a un plugin. Esas instrucciones están desactualizadas.

Registro de Plugins

Registra cada plugin una vez para que GSAP (y los empaquetadores) sepan que deben incluirlo. Usa gsap.registerPlugin() con cada plugin utilizado en el proyecto:

import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);

• ✅ Regístrate antes de usar el plugin en cualquier tween o llamada API.
• ✅ En React, registra a nivel superior o una vez en la aplicación (por ejemplo, antes del primer useGSAP); no registres dentro de un componente que se re-renderice. useGSAP es un plugin que debe registrarse antes de usarse.

Scroll

ScrollToPlugin

Anima la posición de desplazamiento (ventana o elemento desplazable). Úsalo para “desplazar a un elemento” o “desplazar a una posición” sin ScrollTrigger.

gsap.registerPlugin(ScrollToPlugin);

gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });

ScrollToPlugin — configuración clave (objeto scrollTo):

Opción	Descripción
x, y	Posición de desplazamiento objetivo (número) o "max" para el máximo
element	Selector o elemento al que desplazarse (para desplazar a la vista)
offsetX, offsetY	Desplazamiento en píxeles desde la posición objetivo

ScrollSmoother

Envoltura de desplazamiento suave (suaviza el desplazamiento nativo). Requiere ScrollTrigger y una estructura DOM específica (envoltura de contenido + envoltura suave). Úsalo cuando se necesite un desplazamiento suave con estilo de momentum. Consulta la documentación de GSAP para la configuración; regístralo después de ScrollTrigger. La estructura DOM sería:

<body>
	<div id="smooth-wrapper">
		<div id="smooth-content">
			<!--- TODO TU CONTENIDO AQUÍ --->
		</div>
	</div>
	<!-- Los elementos con position: fixed pueden ir fuera --->
</body>

DOM / UI

Flip

Captura el estado con Flip.getState(), luego aplica cambios (por ejemplo, cambios de diseño o clase), luego usa Flip.from() para animar desde el estado anterior al nuevo estado (FLIP: First, Last, Invert, Play). Úsalo al animar entre dos estados de diseño (listas, cuadrículas, expandido/contraído).

gsap.registerPlugin(Flip);

const state = Flip.getState(".item");
// cambia el DOM (reordenar, agregar/eliminar, cambiar clases)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });

Flip — configuración clave (variables de Flip.from):

Opción	Descripción
absolute	Usa position: absolute durante el flip (predeterminado: false)
nested	Cuando es true, solo se mide el primer nivel de hijos (mejor para transformaciones anidadas)
scale	Cuando es true, escala los elementos para que encajen (evita el estiramiento); predeterminado true
simple	Cuando es true, solo se animan la posición/escala (más rápido, menos preciso)
duration, ease	Opciones estándar de tween

Más información

https://gsap.com/docs/v3/Plugins/Flip

Draggable

Hace que los elementos sean arrastrables, giratorios o lanzables con mouse/táctil. Úsalo para sliders, tarjetas, listas reordenables o cualquier interacción de arrastre.

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
Draggable.create(".knob", { type: "rotation" });

Draggable — opciones de configuración clave:

Opción	Descripción
type	"x", "y", "x,y", "rotation", "scroll"
bounds	Elemento, selector o { minX, maxX, minY, maxY } para restringir el arrastre
inertia	true para habilitar lanzamiento/momentum (requiere InertiaPlugin)
edgeResistance	0–1; resistencia al arrastrar más allá de los límites
cursor	Cursor CSS durante el arrastre
onDragStart, onDrag, onDragEnd	Callbacks; reciben el evento y el objetivo
onThrowUpdate, onThrowComplete	Callbacks cuando la inercia está activa

Inertia (InertiaPlugin)

Funciona con Draggable para dar momentum después de soltar, o rastrea la inercia/velocidad de cualquier propiedad de cualquier objeto para que luego pueda deslizarse suavemente hasta detenerse usando un tween simple. Regístralo con Draggable al usar inertia: true:

gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", inertia: true });

O rastrea la velocidad de una propiedad:

InertiaPlugin.track(".box", "x");

Luego usa "auto" para continuar la velocidad actual y deslizarse hasta detenerse:

gsap.to(obj, { inertia: { x: "auto" } });

Observer

Normaliza la entrada de puntero y desplazamiento entre dispositivos. Úsalo para deslizar, dirección de desplazamiento o lógica de gestos personalizada sin vincularse directamente a la posición de desplazamiento como ScrollTrigger.

gsap.registerPlugin(Observer);

Observer.create({
  target: "#area",
  onUp: () => {},
  onDown: () => {},
  onLeft: () => {},
  onRight: () => {},
  tolerance: 10
});

Observer — opciones de configuración clave:

Opción	Descripción
target	Elemento o selector a observar
onUp, onDown, onLeft, onRight	Callbacks cuando el deslizamiento/desplazamiento supera la tolerancia en esa dirección
tolerance	Píxeles antes de detectar la dirección; predeterminado 10
type	"touch", "pointer" o "wheel" (predeterminado: "touch,pointer")

Texto

SplitText

Divide el texto de un elemento en caracteres, palabras y/o líneas (cada uno en su propio elemento) para animación escalonada o por unidad. Úsalo al animar texto carácter por carácter, palabra por palabra o línea por línea. Devuelve una instancia con chars, words, lines (y masks cuando se establece mask). Restaura el marcado original con revert() o deja que gsap.context() lo revierta. Se integra con gsap.context(), matchMedia() y useGSAP(). API: SplitText.create(target, vars) (target = selector, elemento o array).

gsap.registerPlugin(SplitText);

const split = SplitText.create(".heading", { type: "words, chars" });
gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
// luego: split.revert() o deja que gsap.context() limpie y revierta

Con onSplit() (v3.13.0+), las animaciones se ejecutan en cada división y en cada re-división cuando se usa autoSplit; devolver un tween/timeline desde onSplit() permite que SplitText limpie y sincronice el progreso en la re-división:

SplitText.create(".split", {
  type: "lines",
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
  }
});

SplitText — configuración clave (variables de SplitText.create):

Opción	Descripción
type	Separado por comas: "chars", "words", "lines". Predeterminado "chars,words,lines". Divide solo lo necesario (por ejemplo, "words, chars" si no se usan líneas) por rendimiento. Evita solo chars sin words/lines o usa smartWrap: true para evitar saltos de línea extraños.
charsClass, wordsClass, linesClass	Clase CSS en cada elemento dividido. Agrega "++" para añadir una clase incrementada (por ejemplo, linesClass: "line++" → line1, line2, …).
aria	"auto" (predeterminado), "hidden" o "none". Accesibilidad: "auto" agrega aria-label en el elemento dividido y aria-hidden en los elementos de línea/palabra/carácter para que los lectores de pantalla lean la etiqueta; "hidden" oculta todo a los lectores; "none" deja aria sin cambios. Usa "none" más un duplicado solo para lectores de pantalla si los enlaces/semántica anidados deben exponerse.
autoSplit	Cuando es true, revierte y re-divide cuando las fuentes terminan de cargarse o cuando el ancho del elemento cambia (y las líneas están divididas), evitando saltos de línea incorrectos. Las animaciones deben crearse dentro de onSplit() para que apunten a los elementos recién divididos; devuelve la animación desde onSplit() para limpieza automática y sincronización de tiempo en la re-división.
onSplit(self)	Callback cuando la división se completa (y en cada re-división si autoSplit es true). Recibe la instancia de SplitText. Devolver un tween o timeline de GSAP permite revertir/sincronizar automáticamente esa animación al re-dividir.
mask	"lines", "words" o "chars". Envuelve cada unidad en un elemento adicional con overflow: clip para efectos de máscara/revelado. Solo un tipo; accede a las envolturas en el array masks de la instancia (o usa clase -mask si se establece una clase).
tag	Etiqueta del elemento envoltorio; predeterminado "div". Usa "span" para inline (nota: las transformaciones como rotación/escala pueden no renderizarse en elementos inline en algunos navegadores).
deepSlice	Cuando es true (predeterminado), los elementos anidados (por ejemplo, <strong>) que abarcan varias líneas se subdividen para que las líneas no se estiren verticalmente. Solo se aplica al dividir líneas.
ignore	Selector o elemento(s) que no se dividirán (por ejemplo, ignore: "sup").
smartWrap	Al dividir solo chars, envuelve las palabras en un span con white-space: nowrap para evitar saltos de línea en medio de la palabra. Se ignora si se dividen palabras o líneas. Predeterminado false.
wordDelimiter	Límite de palabra: string (predeterminado " "), RegExp o { delimiter: RegExp, replaceWith: string } para división personalizada (por ejemplo, unión de ancho cero para hashtags o no latino).
prepareText(text, parent)	Función que recibe el texto sin procesar y el elemento padre; devuelve el texto modificado antes de dividir (por ejemplo, para insertar marcadores de salto en idiomas sin espacios).
propIndex	Cuando es true, agrega una variable CSS con índice en cada elemento dividido (por ejemplo, --word: 1, --char: 2).
reduceWhiteSpace	Colapsa espacios consecutivos; predeterminado true. Desde v3.13.0 también respeta los saltos de línea y puede insertar <br> para <pre>.
onRevert	Callback cuando se revierte la instancia.

Consejos: Divide solo lo que se anima (por ejemplo, omite chars si solo se animan palabras). Para fuentes personalizadas, divide después de que carguen (por ejemplo, document.fonts.ready.then(...)) o usa autoSplit: true con onSplit(). Para evitar el desplazamiento de kerning al dividir chars, usa CSS font-kerning: none; text-rendering: optimizeSpeed;. Evita text-wrap: balance; puede interferir con la división. SplitText no soporta SVG <text>.

Más información: SplitText

ScrambleText

Anima el texto con un efecto de scramble/glitch. Úsalo al revelar o hacer transición de texto con un scramble.

gsap.registerPlugin(ScrambleTextPlugin);

gsap.to(".text", {
  duration: 1,
  scrambleText: { text: "Nuevo mensaje", chars: "01", revealDelay: 0.5 }
});

SVG

DrawSVG (DrawSVGPlugin)

Revela u oculta el trazo de elementos SVG animando stroke-dashoffset / stroke-dasharray. Funciona en <path>, <line>, <polyline>, <polygon>, <rect>, <ellipse>. Úsalo al “dibujar” o “borrar” trazos.

Valor drawSVG: Describe el segmento visible del trazo a lo largo de la ruta (posiciones de inicio y fin), no “animar de A a B en el tiempo.” Formato: "inicio fin" en porcentaje o longitud. Ejemplos: "0% 100%" = trazo completo; "20% 80%" = trazo solo entre el 20% y el 80% (huecos en ambos extremos). El tween anima desde el segmento actual del elemento al segmento objetivo — por ejemplo, gsap.to("#path", { drawSVG: "0% 100%" }) va desde lo que sea ahora hasta el trazo completo. Un valor único (por ejemplo, 0, "100%") significa que el inicio es 0: "100%" es equivalente a "0% 100%".

Requisito: El elemento debe tener un trazo visible — establece stroke y stroke-width en CSS o como atributos SVG; de lo contrario, no se dibuja nada.

gsap.registerPlugin(DrawSVGPlugin);

// dibujar desde nada hasta trazo completo
gsap.from("#path", { duration: 1, drawSVG: 0 });
// o segmento explícito: desde 0–0 hasta 0–100%
gsap.fromTo("#path", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%", duration: 1 });
// trazo solo en el medio (huecos en los extremos)
gsap.to("#path", { duration: 1, drawSVG: "20% 80%" });

Advertencias: Solo afecta al trazo (no al relleno). Prefiere elementos <path> de un solo segmento; las rutas de múltiples segmentos pueden renderizarse de forma extraña en algunos navegadores. Los contenidos de <use> no se pueden cambiar visualmente. DrawSVGPlugin.getLength(element) y DrawSVGPlugin.getPosition(element) devuelven la longitud del trazo y la posición actual.

Más información: DrawSVG

MorphSVG (MorphSVGPlugin)

Morfiza una forma SVG en otra animando el atributo d (datos de la ruta). Las formas inicial y final no necesitan tener el mismo número de puntos — MorphSVG convierte a curvas de Bézier cúbicas y agrega puntos según sea necesario. Úsalo para morfismos de icono a icono, transiciones de forma o animaciones basadas en rutas. Funciona en <path>, <polyline> y <polygon>; <circle>, <rect>, <ellipse> y <line> se convierten internamente o mediante MorphSVGPlugin.convertToPath(selector | element) (reemplaza el elemento en el DOM con un <path>).

Valor morphSVG: Puede ser un selector (por ejemplo, "#lightning"), un elemento, datos de ruta sin procesar (por ejemplo, "M47.1,0.8 73.3,0.8...") o, para polígonos/polilíneas, una cadena de puntos (por ejemplo, "240,220 240,180...").

gsap.registerPlugin(MorphSVGPlugin);

// Morfizar de #icon1 a #icon2
gsap.to("#icon1", {
  duration: 0.8,
  morphSVG: "#icon2",
  ease: "power2.inOut"
});

// Morfizar a datos de ruta sin procesar
gsap.to("#shape", {
  duration: 1,
  morphSVG: "M10,10 L100,10 L100,100 Z"
});

Configuración clave (objeto morphSVG):

Opción	Descripción
shape	Objetivo: selector, elemento o cadena de ruta. Equivalente al valor directo morphSVG: "#icon2".
map	"size" (predeterminado), "diagonals", "points" o "fill". Controla cómo MorphSVG combina puntos para formas de diferente número de puntos: "size" = agregar puntos suavemente a lo largo de la forma, "diagonals" = crear diagonales, "points" = mapear punto a punto (requiere el mismo número de puntos), "fill" = rellenar con puntos de manera uniforme.
type	"rotational" o "linear" — método de interpolación interno.
shapeIndex	Índice de forma (para formas compuestas); predeterminado "auto".
precision	0–? (mayor = más puntos para formas suaves pero más transformaciones); predeterminado 10.
prependTo	Añade estos datos de ruta antes de la ruta de morph (útil para mantener transformaciones).

Consejos: Para un rendimiento óptimo, usa ease: "none" o haz que el tween sea parte de un timeline para un morph consistente. MorphSVG actualiza directamente sobre el atributo del elemento; no requiere {immediateRender: false} para gsap.from(). Para morfismos de iconos, asegúrate de que los elementos estén definidos con <path>; usa MorphSVGPlugin.convertToPath() para elementos como <circle>.

Más información: MorphSVG | Tutorial sobre morphing de iconos

MotionPath (MotionPathPlugin)

Anima un elemento a lo largo de una ruta SVG. Mueve cualquier propiedad de transformación (x, y, rotate) para seguir una ruta. Úsalo para movimiento de objetos a lo largo de caminos SVG sin animar manualmente x/y.

gsap.registerPlugin(MotionPathPlugin);

gsap.to("#element", {
  duration: 2,
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5],
    autoRotate: true
  }
});

Configuración clave (objeto motionPath):

Opción	Descripción
path	Selector, elemento o array de puntos [{x, y}, ...] que define la ruta
align	Selector/elemento para alinear el objetivo (sobrescribe start/end si se usa)
alignOrigin	[x, y] (0-1) punto de origen para alinear al camino; predeterminado [0.5, 0.5]
autoRotate	true (predeterminado) u orientación [x, y] o valor booleano
start	Porcentaje (0-1) donde comenzar en el camino; predeterminado 0
end	Porcentaje (0-1) donde terminar en el camino; predeterminado 1
autoRotateSpeed	Límite (grados por segundo) para la rotación automática de seguimiento; predeterminado Infinity
resist	Resistencia de interpolación al cambiar la posición actual (0-1); predeterminado 0
curviness	Suavizado de curvas al usar matrices de puntos
useRadians	Cuando es true, usa radianes para la rotación (no grados)
fromCurrent	Cuando es true, anima desde la posición actual del objetivo en el camino
offsetX, offsetY	Desplazamiento desde el punto del camino en píxeles

Consejos: MotionPathPlugin también puede devolver la longitud de un camino con MotionPathPlugin.getLength(path), obtener coordenadas en un punto con MotionPathPlugin.getPosition(path, progress) y obtener puntos de control a lo largo de un camino SVG sin animar con MotionPathPlugin.getPathData(path).

Más información: MotionPathPlugin

Física

Physics2DPlugin

Aplica fuerzas físicas 2D (gravedad, velocidad, ángulo) para animaciones realistas de proyectiles o partículas. Úsalo para animaciones de lanzamiento, caída o trayectoria. Nota: La partícula se detiene cuando toca los límites definidos o el final del contenedor.

gsap.registerPlugin(Physics2DPlugin);

gsap.to(".ball", {
  physics2D: {
    velocity: 300,
    angle: 45,
    gravity: 200
  },
  duration: 3,
  ease: "none"
});

Configuración clave (objeto physics2D):

Opción	Descripción
velocity	Velocidad inicial en píxeles/segundo; predeterminado 0
angle	Ángulo de lanzamiento en grados (0 = derecha, 90 = arriba); predeterminado 0
gravity	Fuerza gravitacional (píxeles/segundo²); predeterminado 0
acceleration	Aceleración adicional en píxeles/segundo² a lo largo del ángulo
friction	Fricción (0-1) que reduce la velocidad con el tiempo; predeterminado 0
minVelocity, maxVelocity	Límites de velocidad
width, height	Límites de área (la partícula se detiene al alcanzarlos)
onCollision	Callback al chocar con los límites; recibe el objetivo

PhysicsPropsPlugin

Aplica física a cualquier propiedad numérica (no solo x/y), como rotación, opacidad o color. Úsalo para oscilaciones, caídas o cualquier animación basada en física sin configurar manualmente valores clave

gsap.registerPlugin(PhysicsPropsPlugin);

// Oscilación de rotación
gsap.to(".gear", {
  physicsProps: {
    rotation: { velocity: 360, acceleration: 50 } // aceleración angular
  },
  duration: 5
});

Configuración clave (objeto physicsProps — propiedades):

Propiedad	Descripción
velocity	Velocidad inicial de esa propiedad; predeterminado 0
acceleration	Aceleración por segundo²; predeterminado 0
friction	Fricción (0-1) que reduce la velocidad con el tiempo; predeterminado 0
min, max	Límites de valor para la propiedad

Nota: Con PhysicsPropsPlugin no se utiliza el objeto {} alrededor de la propiedad; en su lugar, cada propiedad tiene su propia configuración de velocidad/aceleración.

Easing

CustomEase

Crea curvas de easing personalizadas a partir de una cadena de ruta SVG (curvas de Bézier cúbicas). Se puede usar como ease: CustomEase.create("name", "M0,0 C0.2,0.8 0.8,0.2 1,1").

gsap.registerPlugin(CustomEase);

const myEase = CustomEase.create("myEase", "M0,0 C0.25,0.1 0.25,1 1,1");
gsap.to(".box", { duration: 1, x: 100, ease: myEase });

Configuración clave:

Parámetro	Descripción
nombre	Identificador único para la curva de easing
ruta	Cadena de ruta SVG (curva de Bézier cúbica) que define la curva; debe comenzar en M0,0 y terminar en 1,1

CustomEase también admite la creación a partir de un array de puntos: CustomEase.create("custom", [0, 0, 0.5, 0, 0.5, 1, 1, 1]) (pares x1, y1, x2, y2).

Más información: CustomEase

EasePack

Colección de curvas de easing convenientes: "rough", "slow", "steps", "expoScale", "circ", "sine", "back", "bounce", "elastic" y variaciones. Úsalas como strings: ease: "rough({strength: 0.3, points: 20})".

import gsap from "gsap";
import { EasePack } from "gsap/EasePack";

gsap.registerPlugin(EasePack);

gsap.to(".box", { duration: 2, x: 100, ease: "rough({strength: 0.3, points: 20})" });

Easings disponibles:

Easing	Descripción
rough	Curva irregular con fuerza y puntos configurables
slow	Movimiento lento con aceleración/desaceleración suave
steps	Interpolación escalonada (tipo animación stop-motion)
expoScale	Interpolación exponencial para escalado
circ, sine, back, bounce, elastic	Variaciones estándar con prefijos In, Out, InOut

Más información: EasePack

CustomWiggle

Crea curvas de vibración/wiggle personalizadas. Úsalo para efectos de sacudida, temblor o rebote.

gsap.registerPlugin(CustomWiggle);

const wiggle = CustomWiggle.create("myWiggle", { wiggles: 5, type: "easeOut" });
gsap.to(".icon", { duration: 0.8, scale: 1.2, ease: wiggle });

Configuración clave:

Parámetro	Descripción
nombre	Identificador único
wiggles	Número de oscilaciones; predeterminado 10
type	"easeOut", "easeInOut", "easeIn" o "random"; predeterminado "easeOut"
amplitude	Amplitud relativa (0-1); predeterminado 1
randomness	Factor de aleatoriedad (0-1); predeterminado 0

Más información: CustomWiggle

CustomBounce

Crea curvas de rebote personalizadas con control sobre la altura de los picos de rebote y la suavidad.

gsap.registerPlugin(CustomBounce);

const bounce = CustomBounce.create("myBounce", { strength: 0.7, smooth: true });
gsap.to(".ball", { duration: 1.5, y: 300, ease: bounce });

Configuración clave:

Parámetro	Descripción
nombre	Identificador único
strength	Fuerza de los rebotes (0-1); predeterminado 0.7
smooth	Suavidad de la curva (booleano); predeterminado true
endAtStart	Cuando es true, la animación termina de vuelta en el valor inicial (apropiado para rebote en el lugar)

Más información: CustomBounce

Herramientas de Desarrollo

GSDevTools

Interfaz gráfica de depuración para animaciones GSAP. Muestra controles de reproducción (reproducir/pausar/reiniciar/adelantar/rebobinar), un marcador de progreso arrastrable y el tiempo total. Úsalo para depurar o presentar animaciones (no en producción a menos que esté bien)

gsap.registerPlugin(GSDevTools);

const tl = gsap.timeline();
tl.to(".box", { duration: 1, x: 100 })
  .to(".box", { duration: 1, y: 50 });

GSDevTools.create({ animation: tl });

Configuración clave (objeto de creación de GSDevTools):

Opción	Descripción
animation	Tween o timeline para controlar
container	Elemento contenedor para la herramienta (por defecto se añade al body)
css	Objeto con estilos CSS para anular la apariencia
id	ID para el elemento contenedor
timeScale	Escala de tiempo inicial (1 = normal)
visibility	"visible" o "hidden"

Más información: GSDevTools

Resumen de Registro de Plugins

Plugin	Efectos y Casos de Uso
ScrollToPlugin	Desplazamiento suave a elementos/posiciones
ScrollSmoother	Desplazamiento suave con momentum
Flip	Animaciones FLIP para cambios de diseño
Draggable + InertiaPlugin	Arrastrar, lanzar, girar elementos
Observer	Gestos táctiles/de puntero (deslizar, scroll)
SplitText	Animaciones de texto por carácter/palabra/línea
ScrambleTextPlugin	Efecto de texto con glitch/scramble
DrawSVGPlugin	Dibujar/ocultar trazos SVG
MorphSVGPlugin	Morfismo de formas SVG
MotionPathPlugin	Animación de elementos a lo largo de rutas SVG
Physics2DPlugin	Física 2D (gravedad, velocidad, ángulo)
PhysicsPropsPlugin	Física para cualquier propiedad (rotación, opacidad)
CustomEase	Crear curvas de easing personalizadas
EasePack	Colección de easings (rough, slow, steps, etc.)
CustomWiggle	Efectos de vibración/sacudida
CustomBounce	Efectos de rebote personalizados
GSDevTools	Depurador visual de animaciones