5 familias sincronizadas desde la biblioteca local.
05 / Repositorio motion
Mis animaciones
Biblioteca viva con 79 animaciones GSAP clasificadas, previews rápidos y acceso directo a la demo completa de cada efecto.
79 demosGSAPScrollTriggerCSS 3DCanvas / SVG
Core, ScrollTrigger, SVG, UI, texto, canvas y profundidad 3D.
Scroll audit ruler, Transcript focus reel, Decision matrix 3D.
Archivo sincronizado
Cada animación con preview, explicación y URL propia
Los mini-previews funcionan como un GIF ligero dentro del portfolio; el botón abre la carpeta estática real de la animación, con HTML, CSS y JavaScript completos.
A01GSAP core
Mask reveal page
Transicion de pagina con paneles que barren la pantalla y revelan el contenido por capas.
- page
- wipe
- mask
- timeline
A02GSAP core
Layered hero intro
Entrada editorial con capas de imagen, copy, metadata y llamada a la accion.
- intro
- hero
- stagger
- clip
A03GSAP core
Magnetic hover cards
Microinteraccion de tarjetas con atraccion al cursor, profundidad y salida elastica.
- hover
- cards
- microinteraction
A04GSAP + ScrollTrigger
Pinned story panels
Seccion fijada al viewport con copy, progreso y paneles que se relevan durante el scroll.
- scroll
- pin
- scrub
- story
A05GSAP + ScrollTrigger
Parallax depth gallery
Galeria con capas a distintas velocidades para profundidad sin librerias extra.
- scroll
- parallax
- depth
A06GSAP + ScrollTrigger
Horizontal showcase track
Carril horizontal controlado por scroll vertical para presentar proyectos o pasos.
- scroll
- horizontal
- container
A07GSAP core
Drawn stroke reveal
Revelado de lineas SVG con strokeDasharray y aparicion escalonada.
- svg
- draw
- stroke
A08GSAP + Canvas
Path follow orbit
Movimiento de un elemento sobre una ruta SVG usando getPointAtLength.
- svg
- path
- orbit
A09GSAP core
Overlay menu transition
Menu de pantalla completa con reveal de paneles, links y cierre reversible.
- menu
- overlay
- navigation
A10GSAP + Flip
Flip grid filter
Reordenacion fluida de tarjetas al filtrar categorias con GSAP Flip.
- flip
- filter
- grid
A11GSAP core
Modal shared element
Apertura de detalle con expansion, fondo atenuado y timeline reversible.
- modal
- detail
- transition
A12GSAP core
Split line reveal
Revelado por palabras y lineas sin plugin externo de SplitText.
- text
- split
- reveal
A13GSAP core
Scramble headline
Scramble controlado para titulares, contadores o estados de carga.
- text
- scramble
- headline
A14GSAP core
Kinetic marquee
Marquesina continua con aceleracion suave al hacer hover.
- text
- marquee
- loop
A15GSAP + Canvas
Particle dissolve canvas
Dissolve de particulas en canvas para revelar o ocultar una escena sin assets externos.
- canvas
- particles
- dissolve
A16GSAP + 3D
Depth tile shuffle
Mosaico con entrada 3D, cambios de profundidad y shuffle continuo de tarjetas.
- 3d
- grid
- shuffle
A17GSAP + ScrollTrigger
Velocity skew reveal
Tarjetas que reaccionan a la velocidad del scroll con skew y compresion controlada.
- scroll
- velocity
- skew
A18GSAP core
Liquid blob morph
Forma SVG que respira, cambia de silueta y empuja capas tipograficas.
- svg
- morph
- blob
A19GSAP core
Command palette reveal
Palette tipo launcher con apertura compacta, lista escalonada e indicador deslizante.
- command
- palette
- launcher
A20GSAP core
Cursor follow preview
Preview flotante que sigue el cursor y cambia de contenido segun la tarjeta activa.
- cursor
- preview
- hover
A21GSAP core
Countup metric rack
Contadores, barras y labels que entran como panel de metricas para dashboards.
- text
- numbers
- dashboard
A22GSAP core
Type swap carousel
Palabras apiladas que rotan con mascara vertical para titulares dinamicos.
- text
- carousel
- mask
A23GSAP + Three
Three.js prism field
Escena WebGL con prismas flotantes, camara reactiva y timeline GSAP.
- threejs
- webgl
- 3d
A24GSAP + ScrollTrigger
Scroll depth stack
Capas de producto que se separan en profundidad 3D al avanzar el scroll.
- scroll
- 3d
- depth
A25GSAP + 3D
Spatial card orbit
Carrusel de tarjetas en profundidad 3D con navegacion por capas y foco central.
- ui
- 3d
- carousel
A26GSAP core
Radar sweep signals
Radar SVG con barrido circular, blips pulsantes y anillos de deteccion.
- svg
- radar
- signals
A27GSAP + 3D
Canvas depth tunnel
Tunel de particulas con perspectiva simulada, control de velocidad y entrada cinematica.
- canvas
- 3d
- tunnel
A28GSAP + 3D
Cylinder type rotator
Rueda tipografica en CSS 3D con palabras alrededor de un cilindro virtual.
- text
- 3d
- rotator
A29GSAP + 3D
Isometric surface wave
Malla canvas isometrica con altura animada, profundidad y barrido de energia.
- canvas
- isometric
- 3d
A30GSAP core
Before after shutter
Comparador visual con cortinilla, persiana de revelado y control de estados.
- ui
- compare
- shutter
A31GSAP + Canvas
Canvas ribbon flow
Cintas canvas fluidas con profundidad, parallax y cambio de energia controlado.
- canvas
- ribbon
- flow
A32GSAP + 3D
Folding panel transition
Paneles UI que se pliegan en 3D para revelar un nuevo estado de interfaz.
- ui
- 3d
- fold
A33GSAP + 3D
Orbital depth field
Campo canvas con orbitas, estelas y profundidad simulada para escenas de sistema.
- canvas
- orbit
- 3d
A34GSAP + 3D
Flip board status
Tablero tipografico de estado con tarjetas que giran en 3D y cambian de etiqueta.
- text
- 3d
- status
A35GSAP + 3D
Voxel rise field
Campo CSS 3D de voxels que suben en oleadas y se reordenan con profundidad.
- css
- 3d
- voxel
A36GSAP core
Letter wave reveal
Revelado tipografico con caracteres independientes, profundidad y oleadas direccionales.
- text
- letters
- wave
A37GSAP core
Ink mask scanner
Mascara SVG que revela una composicion por manchas, linea de escaneo y anillos sincronizados.
- svg
- mask
- scanner
A38GSAP + 3D
Depth sort cards
Cartas de interfaz que se apilan, orbitan y reordenan en profundidad CSS 3D.
- ui
- 3d
- cards
A39GSAP + ScrollTrigger
Focus lens scroll
Narrativa con lupa de enfoque que sigue el scroll y activa tarjetas por profundidad visual.
- scroll
- scrub
- focus
- lens
A40GSAP + 3D
Prism carousel 3D
Carrusel CSS 3D con prismas de contenido que giran, cambian prioridad y mantienen foco legible.
- ui
- 3d
- carousel
- prism
A41GSAP + 3D
Helix depth ribbon
Cinta CSS 3D con tarjetas que orbitan en helicoide, cambian prioridad y se dispersan por capas.
- core
- 3d
- helix
- depth
A42GSAP + ScrollTrigger
Mask step sequence
Secuencia ScrollTrigger con paneles enmascarados que se revelan en capas al avanzar por el scroll.
- scroll
- mask
- sequence
- scrub
A43GSAP core
Signal thread map
Mapa SVG con rutas dibujadas, puntos que viajan por path length y nodos que responden por oleadas.
- svg
- path
- signal
- map
A44GSAP + 3D
Canvas depth heatmap
Malla canvas pseudo-3D con puntos proyectados, pulso de profundidad y modos wave/fold controlados por GSAP.
- canvas
- 3d
- mesh
- heatmap
A45GSAP core
Radial command dial
Selector radial de comandos con foco giratorio, expansion de acciones y microinteracciones de prioridad.
- ui
- radial
- command
- dial
A46GSAP + ScrollTrigger
Scroll snap ruler
Recorrido ScrollTrigger con medidor lateral, tarjetas que encajan por tramos y lectura de progreso por pasos.
- scroll
- ruler
- snap
- steps
A47GSAP core
Form validation cascade
Microinteraccion de formulario con foco secuencial, estados de validacion y progreso tactil.
- ui
- form
- validation
- microinteraction
A48GSAP core
Blueprint route tracer
Plano SVG con rutas tecnicas, callouts y trazos que se dibujan por fases con puntos guia.
- svg
- blueprint
- route
- diagram
A49GSAP + 3D
Product cube inspector
Cubo CSS 3D con caras de producto, rotacion controlada y modo explotado para inspeccion modular.
- core
- css
- 3d
- product
A50GSAP + 3D
Route stack transition
Transicion de navegacion con paginas apiladas en CSS 3D, profundidad y cambio de ruta controlado.
- core
- 3d
- route
- navigation
A51GSAP core
Empty state reveal
Estado vacio que se convierte en dashboard activo con tarjetas, CTA y feedback de primera accion.
- ui
- empty
- state
- dashboard
A52GSAP core
Skeleton to content
Loader de texto que transforma skeleton bars en contenido final, con progreso y estados de carga reutilizables.
- text
- loading
- skeleton
- state
A53GSAP + 3D
Layered device explode
Exploded view en CSS 3D para mostrar capas de producto, arquitectura o interfaz sin perder jerarquia.
- core
- 3d
- product
- layers
A54GSAP core
Constellation linker
Mapa SVG con nodos conectados por rutas que se dibujan y reordenan para explicar dependencias o flujos.
- svg
- path
- network
- dependency
A55GSAP core
Redaction scan reveal
Lineas censuradas que se escanean y revelan texto final para reports, auditorias o estados protegidos.
- text
- mask
- scan
- reveal
A56GSAP + ScrollTrigger
Diagnostic scroll sequence
Secuencia fijada por scroll que convierte diagnosticos en estados, progreso y tarjetas accionables.
- scroll
- diagnostic
- sequence
- pin
A57GSAP + 3D
Perspective dock 3D
Dock de tarjetas en CSS 3D con expansion, compactacion y respuesta suave al puntero.
- core
- 3d
- dock
- interaction
A58GSAP core
Inspector handoff rail
Rail de estados que pasa el foco entre paneles, metricas y accion principal con microinteracciones GSAP.
- ui
- handoff
- inspector
- state
A59GSAP + Canvas
Canvas vector field
Campo de particulas canvas dirigido por GSAP para representar datos vivos, rutas y estados de intensidad.
- canvas
- data
- flow
- field
A60GSAP core
Flow sankey pulse
Bandas SVG tipo sankey que se dibujan, priorizan rutas y pulsan nodos para explicar distribucion de datos.
- svg
- flow
- sankey
- data
A61GSAP + 3D
Toast stack 3D
Pila de notificaciones en CSS 3D que avanza, resuelve y reordena estados sin perder contexto.
- ui
- 3d
- toast
- queue
A62GSAP + 3D
Layer atlas navigator
Navegador CSS 3D de capas tipo atlas para pasar entre vistas, planos y estados de arquitectura.
- core
- 3d
- atlas
- navigation
A63GSAP core
Workspace morph switcher
Superficie de trabajo que cambia entre brief, build y review con tarjetas que se redistribuyen suavemente.
- ui
- workspace
- morph
- state
A64GSAP core
Command execution timeline
Timeline de comandos con estados de ejecucion, salida progresiva y progreso reutilizable para herramientas tecnicas.
- text
- command
- timeline
- terminal
A65GSAP + 3D
Metric tower 3D
Grafico 3D de metricas con torres que crecen, comparan estados y vuelven a una base compacta.
- core
- 3d
- metrics
- chart
A66GSAP core
Adaptive form path
Formulario por pasos con validacion visual, progreso y campos que se activan segun el estado.
- ui
- form
- progress
- validation
A67GSAP core
Drag ghost sorter
Simulacion de drag and drop con tarjeta fantasma, carriles de destino y reordenacion visual.
- ui
- drag
- drop
- sorter
A68GSAP + Three
Three signal terrain
Escena Three.js ligera con terreno de senales, puntos de altura y camara animada para dashboards 3D.
- core
- threejs
- 3d
- terrain
A69GSAP core
Interactive route map
Mapa SVG con rutas seleccionables, nodos que pulsan y trayectos que se redibujan para flujos de producto.
- svg
- map
- route
- interactive
A70GSAP core
Search filter radar
Buscador visual con chips, resultados filtrados y radar de foco para explorar contenido rapidamente.
- ui
- search
- filter
- radar
A71GSAP + ScrollTrigger
Scroll lens timeline
Narrativa fijada con una lente que enfoca capas de producto mientras el scroll avanza por etapas.
- scroll
- pin
- timeline
- lens
A72GSAP core
Diff patch reveal
Revelado de cambios tipo diff con lineas aceptadas, descartadas y foco sobre el bloque activo.
- text
- code
- diff
- review
A73GSAP + 3D
Command console 3D
Consola de acciones en profundidad con paneles que orbitan, se apilan o enfocan una decision.
- ui
- 3d
- console
- commands
A74GSAP + Canvas
Canvas meter grid
Medidor canvas de senales con barras, barrido y estados de intensidad para dashboards en tiempo real.
- core
- canvas
- meter
- dashboard
A75GSAP core
Cutaway blueprint lens
Blueprint SVG con capas internas, lente de corte y estados seleccionables para explicar arquitectura visual.
- svg
- blueprint
- cutaway
- lens
A76GSAP + 3D
File upload pipeline 3D
Flujo de subida con pila 3D de archivos, etapas de procesamiento y estados de validacion reutilizables.
- ui
- upload
- 3d
- pipeline
A77GSAP + ScrollTrigger
Scroll audit ruler
Regla de auditoria con checkpoints fijados, progreso por scroll y tarjetas de hallazgos que entran por prioridad.
- scroll
- audit
- ruler
- checkpoints
A78GSAP core
Transcript focus reel
Transcripcion animada con marcas de tiempo, foco por segmento y resumen activo para demos de audio o reuniones.
- text
- transcript
- highlight
- meeting
A79GSAP + 3D
Decision matrix 3D
Matriz 3D de decisiones con tarjetas priorizadas, ejes de impacto y modos de comparacion para herramientas operativas.
- ui
- 3d
- matrix
- decision
Sistema
Preparado para crecer con la automatización
Sync local
npm run sync:animations copia la biblioteca estática y el manifest al portfolio.
Preview ligero
Cada tarjeta usa una microanimación de categoría para anticipar la interacción sin cargar 79 demos a la vez.
Demo completa
El botón abre la URL propia de cada animación, servida desde public/animaciones-clasificadas.