Mask reveal page
Transicion de pagina con paneles que barren la pantalla y revelan el contenido por capas.
page / wipe / mask / timelineGenerated animation folders
Classified transitions for project reuse.
Original GSAP recipes organized from public Showcase categories: Core, Scroll, SVG, UI and Text.
Layered hero intro
Entrada editorial con capas de imagen, copy, metadata y llamada a la accion.
intro / hero / stagger / clipMagnetic hover cards
Microinteraccion de tarjetas con atraccion al cursor, profundidad y salida elastica.
hover / cards / microinteractionPinned story panels
Seccion fijada al viewport con copy, progreso y paneles que se relevan durante el scroll.
scroll / pin / scrub / storyParallax depth gallery
Galeria con capas a distintas velocidades para profundidad sin librerias extra.
scroll / parallax / depthHorizontal showcase track
Carril horizontal controlado por scroll vertical para presentar proyectos o pasos.
scroll / horizontal / containerDrawn stroke reveal
Revelado de lineas SVG con strokeDasharray y aparicion escalonada.
svg / draw / strokePath follow orbit
Movimiento de un elemento sobre una ruta SVG usando getPointAtLength.
svg / path / orbitOverlay menu transition
Menu de pantalla completa con reveal de paneles, links y cierre reversible.
menu / overlay / navigationFlip grid filter
Reordenacion fluida de tarjetas al filtrar categorias con GSAP Flip.
flip / filter / gridModal shared element
Apertura de detalle con expansion, fondo atenuado y timeline reversible.
modal / detail / transitionSplit line reveal
Revelado por palabras y lineas sin plugin externo de SplitText.
text / split / revealScramble headline
Scramble controlado para titulares, contadores o estados de carga.
text / scramble / headlineKinetic marquee
Marquesina continua con aceleracion suave al hacer hover.
text / marquee / loopParticle dissolve canvas
Dissolve de particulas en canvas para revelar o ocultar una escena sin assets externos.
canvas / particles / dissolveDepth tile shuffle
Mosaico con entrada 3D, cambios de profundidad y shuffle continuo de tarjetas.
3d / grid / shuffleVelocity skew reveal
Tarjetas que reaccionan a la velocidad del scroll con skew y compresion controlada.
scroll / velocity / skewLiquid blob morph
Forma SVG que respira, cambia de silueta y empuja capas tipograficas.
svg / morph / blobCommand palette reveal
Palette tipo launcher con apertura compacta, lista escalonada e indicador deslizante.
command / palette / launcherCursor follow preview
Preview flotante que sigue el cursor y cambia de contenido segun la tarjeta activa.
cursor / preview / hoverCountup metric rack
Contadores, barras y labels que entran como panel de metricas para dashboards.
text / numbers / dashboardType swap carousel
Palabras apiladas que rotan con mascara vertical para titulares dinamicos.
text / carousel / maskThree.js prism field
Escena WebGL con prismas flotantes, camara reactiva y timeline GSAP.
threejs / webgl / 3dScroll depth stack
Capas de producto que se separan en profundidad 3D al avanzar el scroll.
scroll / 3d / depthSpatial card orbit
Carrusel de tarjetas en profundidad 3D con navegacion por capas y foco central.
ui / 3d / carouselRadar sweep signals
Radar SVG con barrido circular, blips pulsantes y anillos de deteccion.
svg / radar / signalsCanvas depth tunnel
Tunel de particulas con perspectiva simulada, control de velocidad y entrada cinematica.
canvas / 3d / tunnelCylinder type rotator
Rueda tipografica en CSS 3D con palabras alrededor de un cilindro virtual.
text / 3d / rotatorIsometric surface wave
Malla canvas isometrica con altura animada, profundidad y barrido de energia.
canvas / isometric / 3dBefore after shutter
Comparador visual con cortinilla, persiana de revelado y control de estados.
ui / compare / shutterCanvas ribbon flow
Cintas canvas fluidas con profundidad, parallax y cambio de energia controlado.
canvas / ribbon / flowFolding panel transition
Paneles UI que se pliegan en 3D para revelar un nuevo estado de interfaz.
ui / 3d / foldOrbital depth field
Campo canvas con orbitas, estelas y profundidad simulada para escenas de sistema.
canvas / orbit / 3dFlip board status
Tablero tipografico de estado con tarjetas que giran en 3D y cambian de etiqueta.
text / 3d / statusVoxel rise field
Campo CSS 3D de voxels que suben en oleadas y se reordenan con profundidad.
css / 3d / voxelLetter wave reveal
Revelado tipografico con caracteres independientes, profundidad y oleadas direccionales.
text / letters / waveInk mask scanner
Mascara SVG que revela una composicion por manchas, linea de escaneo y anillos sincronizados.
svg / mask / scannerDepth sort cards
Cartas de interfaz que se apilan, orbitan y reordenan en profundidad CSS 3D.
ui / 3d / cardsFocus lens scroll
Narrativa con lupa de enfoque que sigue el scroll y activa tarjetas por profundidad visual.
scroll / scrub / focus / lensPrism carousel 3D
Carrusel CSS 3D con prismas de contenido que giran, cambian prioridad y mantienen foco legible.
ui / 3d / carousel / prismHelix depth ribbon
Cinta CSS 3D con tarjetas que orbitan en helicoide, cambian prioridad y se dispersan por capas.
core / 3d / helix / depthMask step sequence
Secuencia ScrollTrigger con paneles enmascarados que se revelan en capas al avanzar por el scroll.
scroll / mask / sequence / scrubSignal thread map
Mapa SVG con rutas dibujadas, puntos que viajan por path length y nodos que responden por oleadas.
svg / path / signal / mapCanvas depth heatmap
Malla canvas pseudo-3D con puntos proyectados, pulso de profundidad y modos wave/fold controlados por GSAP.
canvas / 3d / mesh / heatmapRadial command dial
Selector radial de comandos con foco giratorio, expansion de acciones y microinteracciones de prioridad.
ui / radial / command / dialScroll snap ruler
Recorrido ScrollTrigger con medidor lateral, tarjetas que encajan por tramos y lectura de progreso por pasos.
scroll / ruler / snap / stepsForm validation cascade
Microinteraccion de formulario con foco secuencial, estados de validacion y progreso tactil.
ui / form / validation / microinteractionBlueprint route tracer
Plano SVG con rutas tecnicas, callouts y trazos que se dibujan por fases con puntos guia.
svg / blueprint / route / diagramProduct cube inspector
Cubo CSS 3D con caras de producto, rotacion controlada y modo explotado para inspeccion modular.
core / css / 3d / productRoute stack transition
Transicion de navegacion con paginas apiladas en CSS 3D, profundidad y cambio de ruta controlado.
core / 3d / route / navigationEmpty state reveal
Estado vacio que se convierte en dashboard activo con tarjetas, CTA y feedback de primera accion.
ui / empty / state / dashboardSkeleton to content
Loader de texto que transforma skeleton bars en contenido final, con progreso y estados de carga reutilizables.
text / loading / skeleton / stateLayered device explode
Exploded view en CSS 3D para mostrar capas de producto, arquitectura o interfaz sin perder jerarquia.
core / 3d / product / layersConstellation linker
Mapa SVG con nodos conectados por rutas que se dibujan y reordenan para explicar dependencias o flujos.
svg / path / network / dependencyRedaction scan reveal
Lineas censuradas que se escanean y revelan texto final para reports, auditorias o estados protegidos.
text / mask / scan / revealDiagnostic scroll sequence
Secuencia fijada por scroll que convierte diagnosticos en estados, progreso y tarjetas accionables.
scroll / diagnostic / sequence / pinPerspective dock 3D
Dock de tarjetas en CSS 3D con expansion, compactacion y respuesta suave al puntero.
core / 3d / dock / interactionInspector handoff rail
Rail de estados que pasa el foco entre paneles, metricas y accion principal con microinteracciones GSAP.
ui / handoff / inspector / stateCanvas vector field
Campo de particulas canvas dirigido por GSAP para representar datos vivos, rutas y estados de intensidad.
canvas / data / flow / fieldFlow sankey pulse
Bandas SVG tipo sankey que se dibujan, priorizan rutas y pulsan nodos para explicar distribucion de datos.
svg / flow / sankey / dataToast stack 3D
Pila de notificaciones en CSS 3D que avanza, resuelve y reordena estados sin perder contexto.
ui / 3d / toast / queueLayer atlas navigator
Navegador CSS 3D de capas tipo atlas para pasar entre vistas, planos y estados de arquitectura.
core / 3d / atlas / navigationWorkspace morph switcher
Superficie de trabajo que cambia entre brief, build y review con tarjetas que se redistribuyen suavemente.
ui / workspace / morph / stateCommand execution timeline
Timeline de comandos con estados de ejecucion, salida progresiva y progreso reutilizable para herramientas tecnicas.
text / command / timeline / terminalMetric tower 3D
Grafico 3D de metricas con torres que crecen, comparan estados y vuelven a una base compacta.
core / 3d / metrics / chartAdaptive form path
Formulario por pasos con validacion visual, progreso y campos que se activan segun el estado.
ui / form / progress / validationDrag ghost sorter
Simulacion de drag and drop con tarjeta fantasma, carriles de destino y reordenacion visual.
ui / drag / drop / sorterThree signal terrain
Escena Three.js ligera con terreno de senales, puntos de altura y camara animada para dashboards 3D.
core / threejs / 3d / terrainInteractive route map
Mapa SVG con rutas seleccionables, nodos que pulsan y trayectos que se redibujan para flujos de producto.
svg / map / route / interactiveSearch filter radar
Buscador visual con chips, resultados filtrados y radar de foco para explorar contenido rapidamente.
ui / search / filter / radarScroll lens timeline
Narrativa fijada con una lente que enfoca capas de producto mientras el scroll avanza por etapas.
scroll / pin / timeline / lensDiff patch reveal
Revelado de cambios tipo diff con lineas aceptadas, descartadas y foco sobre el bloque activo.
text / code / diff / reviewCommand console 3D
Consola de acciones en profundidad con paneles que orbitan, se apilan o enfocan una decision.
ui / 3d / console / commandsCanvas meter grid
Medidor canvas de senales con barras, barrido y estados de intensidad para dashboards en tiempo real.
core / canvas / meter / dashboardCutaway blueprint lens
Blueprint SVG con capas internas, lente de corte y estados seleccionables para explicar arquitectura visual.
svg / blueprint / cutaway / lensFile upload pipeline 3D
Flujo de subida con pila 3D de archivos, etapas de procesamiento y estados de validacion reutilizables.
ui / upload / 3d / pipelineScroll audit ruler
Regla de auditoria con checkpoints fijados, progreso por scroll y tarjetas de hallazgos que entran por prioridad.
scroll / audit / ruler / checkpointsTranscript focus reel
Transcripcion animada con marcas de tiempo, foco por segmento y resumen activo para demos de audio o reuniones.
text / transcript / highlight / meetingDecision matrix 3D
Matriz 3D de decisiones con tarjetas priorizadas, ejes de impacto y modos de comparacion para herramientas operativas.
ui / 3d / matrix / decisionThis library does not copy proprietary website code, assets or exact creative choreography. It creates original, reusable patterns inspired by public GSAP categories and common transition families.