ScrollTrigger con scrub y pin: cómo convertir el scroll en dirección cinematográfica
Aprende a usar `ScrollTrigger` con `scrub`, `pin` y una estructura de secciones que convierta el desplazamiento en narrativa visual. La meta no es fijar un canvas porque sí, sino decidir cuándo una escena debe quedarse en pantalla y cómo repartir el viaje para que el usuario entienda qué está ocurriendo.
El scroll cinematográfico no consiste en pegar una escena 3D al viewport y mover cosas al azar. Consiste en usar el desplazamiento como una línea de tiempo narrativa. Cada tramo del recorrido debe responder a una pregunta visual: qué entra, qué se revela, cuánto dura el foco y cuándo se libera la escena para seguir leyendo.
Aquí `scrub` y `pin` cumplen papeles distintos. `scrub` convierte el scroll en progreso temporal. `pin` mantiene la escena visible el tiempo suficiente para que ese progreso se aprecie sin que el usuario pierda la referencia. Juntos pueden generar una sensación muy dirigida o una experiencia torpe y bloqueante. La diferencia está en el criterio.
Una buena implementación no oculta que sigue siendo una web. Deja aire para leer, no fuerza movimientos infinitos y evita trayectos demasiado largos para una idea demasiado pequeña. Por eso esta lección no va solo de sintaxis de GSAP: va de reparto de atención.
Cuando termines deberías poder diseñar una sección pinned con una duración defendible, un scrub fluido y una transición limpia hacia el resto de la página.
- Lo primero es cambiar el modelo mental.
- Con `ScrollTrigger` no piensas solo en animaciones, sino en una relación entre posición del documento y progreso visual. Ese cambio de mentalidad es clave porque obliga a diseñar el recorrido: dónde empieza, cuánto dura, qué se queda fijo y qué se suelta.
- En una landing 3D profesional, el scroll no debe competir con la historia. Debe ser el mando que regula el avance del capítulo. Si intentas usarlo como simple disparador de efectos, la escena se siente decorativa. Si lo usas como tiempo narrativo, empieza a sentirse dirigida.
- La sincronización exacta no siempre produce la mejor sensación.
- Con `scrub: true` la animación sigue de forma literal los saltos del dispositivo de scroll. En un trackpad puede sentirse bastante bien, pero en ratones más bruscos el resultado a veces parece rígido o entrecortado. Un valor numérico introduce inercia y deja que la escena alcance el punto de scroll con un pequeño retraso controlado.
ScrollTrigger no es un truco de scroll: es una línea de tiempo anclada al documento
Lo primero es cambiar el modelo mental.
Con `ScrollTrigger` no piensas solo en animaciones, sino en una relación entre posición del documento y progreso visual. Ese cambio de mentalidad es clave porque obliga a diseñar el recorrido: dónde empieza, cuánto dura, qué se queda fijo y qué se suelta.
En una landing 3D profesional, el scroll no debe competir con la historia. Debe ser el mando que regula el avance del capítulo. Si intentas usarlo como simple disparador de efectos, la escena se siente decorativa. Si lo usas como tiempo narrativo, empieza a sentirse dirigida.
Por qué `scrub: 1.2` suele funcionar mejor que `scrub: true`
La sincronización exacta no siempre produce la mejor sensación.
Con `scrub: true` la animación sigue de forma literal los saltos del dispositivo de scroll. En un trackpad puede sentirse bastante bien, pero en ratones más bruscos el resultado a veces parece rígido o entrecortado. Un valor numérico introduce inercia y deja que la escena alcance el punto de scroll con un pequeño retraso controlado.
Ese retraso es especialmente útil en recorridos de cámara, rotaciones largas o cambios de iluminación. No elimina la sensación de control, pero sí filtra parte de la vibración del scroll real y acerca el resultado a una experiencia más cinematográfica.
- `scrub: true` es útil para depurar o para movimientos muy mecánicos.
- Entre `1` y `1.5` segundos suele haber un equilibrio muy bueno entre control y suavidad.
- Si el recorrido ya es lento, un scrub demasiado alto puede dar sensación de retraso excesivo.
- Conviene probar con ratón y con trackpad antes de cerrar la duración.
Cuándo fijar la escena y cuándo no hacerlo
Pinning no significa prestigio; significa responsabilidad con el tiempo del usuario.
Fijar una escena tiene sentido cuando el usuario necesita permanecer dentro de un mismo plano mientras cambian cámara, producto, luces o capas de contenido. Si el efecto podría entenderse sin fijar, muchas veces es mejor no bloquear la página.
El error clásico es pinnear una sección durante miles de píxeles para contar algo mínimo. Ese abuso rompe ritmo, genera fatiga y empeora la percepción de velocidad del sitio. El pin debe durar lo justo para completar una idea con claridad.
Diseña por capítulos, no por efectos sueltos
La secuencia mejora cuando cada tramo tiene función visual y verbal.
Una estructura muy útil consiste en dividir la sección en tres o cuatro beats: entrada del escenario, momento de foco, detalle o giro de cámara, y liberación final. Eso te permite repartir duración, texto y cambios de estado de forma mucho más defensible.
Este método conecta muy bien con portfolios como el de Bruno Simon: detrás de la sensación lúdica hay una relación muy pensada entre interacción, cámara y descubrimiento progresivo. No se trata de copiar estética, sino de entender la intención.
Debug común: lo que suele romper una escena con scroll
Conviene detectar estos fallos antes de culpar al renderer o al modelo 3D.
Si el recorrido se siente brusco, primero revisa `scrub`, la longitud del `end` y si hay demasiadas propiedades compitiendo a la vez. Si el pin rompe el layout, revisa la estructura del contenedor y deja claro qué bloque fija la escena y qué bloque aporta texto o altura de scroll.
Otro fallo muy habitual es construir la secuencia sin una versión estática legible. Si la escena solo funciona cuando todo se mueve, el problema no es ScrollTrigger: el problema es la composición base.
- Recorrido corto + demasiados cambios = sensación atropellada.
- Recorrido larguísimo + poca información = sensación de bloqueo.
- Falta de contraste textual = el usuario no entiende qué está guiando el scroll.
- No usar `markers` durante el ajuste inicial suele alargar mucho el debug.
