GSAP Plugins — Referencia Interactiva

Plugin 1

SplitText + ScrambleText

Anima texto carácter a carácter, palabra a palabra o línea a línea. Ideal para headlines de impacto.

✅

Sin licencia ni token. Desde la adquisición por Webflow, todos los plugins de GSAP (incluido SplitText, antes de pago) son gratuitos. Instala con npm install gsap y registra el plugin.

SplitText

Fragmenta el texto de un elemento en chars, words o lines. Cada fragmento queda en su propio span para animar individualmente con stagger.

gsap.registerPlugin(SplitText);

const split = SplitText.create(".heading", {
  type: "words, chars",
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.chars, {
      opacity: 0, y: 30,
      stagger: 0.03, duration: 0.5,
      ease: "power2.out"
    });
  }
});

NutriFlow transforma tu clínica

ScrambleText

ScrambleTextPlugin

Efecto glitch/hacker al cambiar texto. Los caracteres se mezclan aleatoriamente mientras revela el mensaje final — ideal para dashboards tech.

gsap.registerPlugin(ScrambleTextPlugin);

gsap.to(".metric", {
  duration: 1.5,
  scrambleText: {
    text: "2.847 pacientes",
    chars: "0123456789",
    revealDelay: 0.4,
    speed: 0.8
  }
});

2.847 pacientes

Opción	Descripción
text	Texto final a revelar
chars	Caracteres usados en el scramble
revealDelay	Retraso antes de empezar a revelar
speed	Velocidad del scramble (0–1)

SplitText Config

Opciones clave

API completa para control total del split. La opción mask es especialmente potente para revelar texto desde abajo.

Opción	Descripción
type	"chars", "words", "lines" — solo lo que necesitas
autoSplit	Re-split cuando cambia el viewport o fuente
mask	"lines"\|"words"\|"chars" — overflow clip para revelar
onSplit(self)	Callback en cada split; retorna tween para sync
aria	"auto" añade aria-label para accesibilidad
charsClass	Clase CSS por char; "++" añade índice
smartWrap	Evita saltos de línea en mid-word

Plugin 2

Draggable + InertiaPlugin

Elementos arrastrables con momentum físico al soltar. Tipos: x, y, x,y, rotation, scroll.

Draggable

Arrastra la tarjeta dentro del área. Con inertia:true activado, continúa deslizando al soltar.

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".card", {
  type: "x,y",
  bounds: "#container",
  inertia: true,
  edgeResistance: 0.85,
  onDragEnd() {
    // this.x, this.y — posición final
    console.log("Drop en:", this.x, this.y);
  }
});

🥗

Arrastra la tarjeta con inertia ↑

Config

Opciones Draggable

Configura tipo de movimiento, límites, callbacks y comportamiento físico con InertiaPlugin.

Opción	Descripción
type	"x", "y", "x,y", "rotation", "scroll"
bounds	Selector, elemento, o {minX,maxX,minY,maxY}
inertia	true activa momentum (requiere InertiaPlugin)
edgeResistance	0–1; resistencia al arrastrar fuera de bounds
cursor	CSS cursor mientras se arrastra
onDragStart/End	Callbacks con evento y target
onThrowComplete	Callback cuando acaba el momentum

// Knob rotatorio para control de dosis
Draggable.create("#knob", {
  type: "rotation",
  inertia: true,
  snap: function(v) {
    return Math.round(v / 45) * 45;
  }
});

Observer

Detecta gestos (swipe, scroll, pointer) normalizados entre dispositivos. Sin atarse a la posición de scroll como ScrollTrigger.

gsap.registerPlugin(Observer);

Observer.create({
  target: "#panel",
  type: "touch,pointer,wheel",
  tolerance: 10,
  onUp: () => nextSlide(),
  onDown: () => prevSlide(),
  onLeft: () => nextPanel(),
  onRight: () => prevPanel()
});

Opción	Descripción
target	Elemento o selector a observar
tolerance	Píxeles antes de detectar dirección
type	"touch", "pointer", "wheel"
onUp/Down/Left/Right	Callbacks de dirección

Plugin 3

DrawSVG · MorphSVG · MotionPath

Animaciones vectoriales potentes: dibuja trazos, morfea formas y mueve objetos por rutas SVG.

DrawSVG

DrawSVGPlugin

Anima el porcentaje visible del stroke SVG. Usa stroke-dashoffset/dasharray para simular "dibujar" un trazo.

gsap.registerPlugin(DrawSVGPlugin);

// Revelar trazo completo desde cero
gsap.from("#progress-circle", {
  duration: 1.5,
  drawSVG: 0,
  ease: "power2.inOut"
});

// Solo segmento del 20% al 80%
gsap.to("#arc", {
  drawSVG: "20% 80%",
  duration: 1
});

87%

Adherencia

73%

Objetivos

94%

Satisfacción

MorphSVG

MorphSVGPlugin

Transición de forma a forma animando el atributo d. Hoja → Corazón. Clic para morfear.

gsap.registerPlugin(MorphSVGPlugin);

// Hoja -> Corazón en NutriFlow
gsap.to("#icon-path", {
  duration: 0.8,
  morphSVG: {
    shape: "#heart-path",
    type: "rotational",
    shapeIndex: 2
  },
  ease: "power2.inOut"
});

Clic para morfear forma

MotionPath

MotionPathPlugin

Mueve un elemento siguiendo una ruta SVG con rotación automática. Ideal para infografías de procesos.

gsap.registerPlugin(MotionPathPlugin);

gsap.to(".nutriente", {
  duration: 3,
  repeat: -1,
  motionPath: {
    path: "#ruta-digestion",
    align: "#ruta-digestion",
    alignOrigin: [0.5, 0.5],
    autoRotate: true
  },
  ease: "none"
});

Opción	Descripción
path	Selector, elemento o string de path SVG
align	Path al que alinear el target
alignOrigin	[x,y] 0–1; centro por defecto [.5,.5]
autoRotate	Rota el elemento siguiendo la tangente
curviness	0–2; suavidad de la curva

Plugin 4

ScrollToPlugin + Flip

Scroll animado a posición o elemento, y transiciones entre layouts con el patrón FLIP.

ScrollTo

ScrollToPlugin

Anima la posición de scroll sin ScrollTrigger. Útil para botones "ir a sección" o anchor navigation.

gsap.registerPlugin(ScrollToPlugin);

// Scroll a elemento con offset
btnDemo.addEventListener("click", () => {
  gsap.to(window, {
    duration: 1.2,
    scrollTo: {
      y: "#features",
      offsetY: 70
    },
    ease: "power3.inOut"
  });
});

// Scroll hasta el final del contenedor
gsap.to("#feed", {
  scrollTo: { y: "max" },
  duration: 0.8
});

Opción	Descripción
x, y	Posición numérica o "max" para el final
element	Selector o elemento destino (scroll-into-view)
offsetY	Desplazamiento vertical desde el target

Flip

Flip Plugin

Anima el cambio de layout con el patrón FLIP (First, Last, Invert, Play). Clic en las cards para reordenar.

gsap.registerPlugin(Flip);

btnReorder.addEventListener("click", () => {
  // 1. Captura estado actual
  const state = Flip.getState(".item");
  // 2. Cambia el DOM
  shuffleItems();
  // 3. Anima desde el estado previo
  Flip.from(state, {
    duration: 0.6,
    ease: "power2.inOut",
    stagger: 0.05,
    absolute: true
  });
});

🥦

🍋

🫐

🥕

🍓

🫚

ScrollSmoother

Scroll suavizado con momentum nativo. Requiere ScrollTrigger y una estructura DOM específica.

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

const smoother = ScrollSmoother.create({
  wrapper: "#smooth-wrapper",
  content: "#smooth-content",
  smooth: 1.5,
  effects: true
});

// DOM requerido:
// <div id="smooth-wrapper">
//   <div id="smooth-content">
//     ... todo el contenido ...
//   </div>
// </div>

Plugin 5

Physics2D · CustomEase · EasePack

Física 2D para partículas y elementos, y easings completamente personalizados.

Physics2D

Physics2DPlugin

Física 2D con velocidad, ángulo y gravedad. Los círculos del canvas hero usan este plugin para caer naturalmente.

gsap.registerPlugin(Physics2DPlugin);

// Partículas de celebración
particles.forEach(p => {
  gsap.to(p, {
    duration: 2.5,
    physics2D: {
      velocity: gsap.utils.random(80, 250),
      angle: gsap.utils.random(200, 340),
      gravity: 500,
      friction: 0.1
    },
    opacity: 0,
    scale: gsap.utils.random(0.3, 1.5)
  });
});

CustomEase

CustomEase + EasePack

Curvas de easing personalizadas para cualquier feeling: rebote, wiggle, rugoso, expo-escala.

gsap.registerPlugin(CustomEase, EasePack);

// Curva personalizada tipo "spring"
CustomEase.create("nutriSpring",
  "M0,0 C0.1,0 0.2,1.2 0.4,1.05 0.6,0.9 0.8,1.0 1,1"
);

gsap.to(".card", {
  scale: 1.05,
  ease: "nutriSpring",
  duration: 0.6
});

// EasePack: RoughEase, SlowMo, ExpoScale
gsap.to(".value", {
  ease: "rough({strength:2,points:20})",
  duration: 1
});

// CustomWiggle — efecto de error/alerta
CustomWiggle.create("myWiggle", {
  wiggles: 8,
  type: "easeOut"
});

GSDevTools

UI de depuración para scrubbing de timelines y toggling de animaciones. Solo en desarrollo — no incluir en producción.

gsap.registerPlugin(GSDevTools);

// Solo en desarrollo
if (process.env.NODE_ENV !== "production") {
  const tl = gsap.timeline();
  tl.to(".hero", { y: 100 })
    .to(".cta", { scale: 1.1 });

  GSDevTools.create({ animation: tl });
}

⚠️

No incluir en producción. GSDevTools es solo para desarrollo. Quita el registerPlugin antes del build de producción.

// Instalación — todo en el paquete gsap
npm install gsap

// Import con tree-shaking
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
import { Draggable } from "gsap/Draggable";

// Registro en el entry point de la app
gsap.registerPlugin(
  SplitText, MorphSVGPlugin,
  DrawSVGPlugin, Draggable,
  Physics2DPlugin, Flip, ScrollToPlugin
);

Features NutriFlow

Todo lo que necesitas

Estas animaciones GSAP están integradas en el dashboard de NutriFlow para hacer la experiencia excepcional.

📊

Dashboards animados

DrawSVG en métricas circulares, ScrambleText en contadores, SplitText en títulos de sección.

🔄

Reordering fluido

Flip Plugin para reorganizar listas de pacientes y planes sin saltos visuales.

👆

Drag & Drop

Draggable + InertiaPlugin para asignar pacientes a dietistas arrastrando con momentum.

🎯

Morphing de iconos

MorphSVG para transiciones de estado: cargando → completado → error con formas fluidas.

✨

Micro-interacciones

CustomEase y Physics2D para feedback visual en acciones críticas: guardar plan, enviar informe.

📱

Mobile-first

Observer para swipes, ScrollSmoother para scroll suave, autoSplit para textos responsive.

Nutrición clínicapotenciada por IA

Nutrición clínica
potenciada por IA