01gsap.to
Mover un elemento
Define un destino y deja que GSAP interpole el movimiento, la rotación y la escala.
x · y · rotate · scale
gsap.to(target, vars)Ejemplos aplicados
Mira cómo se mueve PHARION.
Una página para probar, comparar y entender las animaciones que convierten una interfaz estática en una experiencia visual.
Un laboratorio visual
Cada tarjeta contiene una técnica real que ya puedes reutilizar.
07
Demos
3.15
GSAP
∞
Posibilidades
Caja de herramientas
Siete formas de dar vida a una interfaz.
Pulsa “Probar” en cada ejemplo
02gsap.from
Entrar desde un punto
Ideal para revelar contenido: la animación empieza fuera de su estado final y termina en su posición natural.
Contenido visibleopacity: 1 · y: 0
gsap.from(target, vars)03gsap.fromTo
Controlar inicio y final
Cuando necesitas precisión total, declaras explícitamente el estado inicial y el estado final.
Nuevo estilolisto para explorar
opacity: 0 → 1scale: .48 → 1
gsap.fromTo(target, from, to)04timeline
Orquestar una secuencia
Una timeline encadena capas y controla sus tiempos para crear una entrada con ritmo editorial.
03 / 03
Resultado final0.38s · 0.55s
timeline.fromTo(...).fromTo(...)05stagger
Revelar una colección
Aplica el mismo movimiento a muchos elementos con un pequeño retraso entre cada uno.
20 elementos
gsap.from(items, { stagger: 0.06 })06ScrollTrigger
Responder al scroll
El progreso de la página controla la animación: útil para contar historias, transiciones y parallax.
startend
scrollTrigger: { scrub: 1 }Scroll07parallax
Dar profundidad a una imagen
Un desplazamiento más lento dentro de una ventana crea profundidad sin saturar la composición.
Imagen de referencia
gsap.to(image, { yPercent: -14 })ScrollEn producto
Estas técnicas ya tienen un lugar en PHARION.
El flujo de trabajo usa entradas escalonadas, parallax y ScrollTrigger. Esta página existe para que puedas ver qué hace cada pieza y ajustarla con intención.