Cómo usar Scroll Speed para efectos dinámicos en Framer
Desarrollo Web
19 mar 2026
Guía práctica para usar Scroll Speed en Framer: ajustes de velocidad, posicionamiento absoluto, alturas fijas, pruebas en Preview y paralaje multicapa.
Scroll Speed en Framer permite ajustar la velocidad de desplazamiento de elementos en relación al scroll de la página. Este efecto, conocido como paralaje, crea una sensación de profundidad al asignar distintas velocidades a los elementos. Por ejemplo:
Más rápido (>100%): Elementos parecen más cercanos.
Más lento (<100%): Elementos parecen más lejanos.
Fijos (0%): Elementos no se desplazan.
Dirección contraria (<0%): Movimiento invertido.
Para configurarlo, selecciona un elemento, activa la opción "Scroll Speed" en la barra lateral y ajusta el valor según el efecto deseado. Combínalo con alturas fijas y posicionamiento absoluto para garantizar un diseño consistente. Además, puedes usar técnicas avanzadas como paralaje multicapa o combinar con transformaciones para enriquecer la experiencia visual.
Recuerda: prueba siempre en modo Preview para verificar el comportamiento real y ajusta según sea necesario para lograr un diseño fluido y atractivo.
Scroll Speed Values and Visual Effects in Framer
Configurar Scroll Speed en Framer
Qué necesitas antes de empezar
Antes de trabajar con Scroll Speed, asegúrate de cumplir algunos requisitos técnicos básicos. Primero, necesitas tener elementos de diseño listos en tu canvas de Framer, como imágenes, capas, textos o cualquier componente que desees animar.
Es importante usar alturas fijas, como 800 px, en las secciones padre. Evita unidades relativas como "vh" (altura del viewport), "fill" o "fit". Esto garantiza que los cálculos del scroll sean consistentes en todos los dispositivos.
Además, los elementos que vayas a animar deben estar configurados en posición absoluta. Esto te permitirá definir coordenadas X e Y exactas. También deberás anclar (pin) estos elementos a una distancia específica en píxeles desde el borde superior o inferior de su contenedor padre, lo que ayudará a mantener una alineación visual precisa.
Con estos ajustes listos, ya puedes activar y personalizar Scroll Speed.
Cómo acceder a la configuración de Scroll Speed
Para empezar, selecciona el elemento que deseas animar en el canvas de Framer. En la barra lateral derecha, busca la sección "Efectos", haz clic en el símbolo "+" y selecciona Scroll Speed.
Al añadir esta opción, verás la propiedad "Speed" (Velocidad). Su valor predeterminado es 100% (1), que representa la velocidad normal de desplazamiento. Según Framer Academy:
"100% is the normal scroll speed. Set elements that should appear further away to a lower percentage (e.g., 80% or 40%) so they scroll slower".
Desde aquí, puedes ajustar el multiplicador de velocidad para lograr diferentes efectos visuales según lo que necesites para tu diseño.
Cómo aplicar efectos de Scroll Speed
Configurar valores de Scroll Speed
Una vez que accedes a la configuración de Scroll Speed, el siguiente paso es ajustar los valores para definir cómo se comportarán tus elementos al desplazarte por la página. Al activar esta función, encontrarás el campo "Speed", que tiene un valor inicial de 100% (equivalente a un multiplicador de 1). Este porcentaje controla la velocidad del elemento en relación con el scroll.
En términos prácticos, puedes modificar estos valores para lograr diferentes efectos. Por ejemplo:
Más de 100% (como 120% o 140%): Aumenta la velocidad, haciendo que el elemento parezca más cercano al espectador, como si estuviera en primer plano.
Entre 0% y 100% (40%, 60%, 80%, etc.): Reduce la velocidad, creando la ilusión de que el elemento está más lejos.
0%: Hace que el elemento permanezca fijo en pantalla, sin desplazarse.
Valores negativos (como -50%): Invierten la dirección del movimiento, aportando un efecto interesante.
Para lograr una sensación de profundidad más realista, aplica el principio del paralaje. Por ejemplo, configura los elementos de fondo con velocidades entre 40% y 80%, mientras que los elementos de primer plano pueden tener velocidades entre 120% y 140%. Este contraste imita cómo percibimos la distancia en el mundo físico.
Probar tus efectos de Scroll Speed
Es importante tener en cuenta que el canvas de Framer no muestra cómo se verán los efectos de scroll en la versión final. Los elementos con velocidades modificadas pueden aparecer fuera de lugar o incluso invisibles en el editor, aunque funcionen correctamente al previsualizarlos. Por eso, es crucial utilizar el modo Preview (icono de play) para comprobar el comportamiento real.
Al realizar pruebas, presta atención a la inercia del desplazamiento. Los elementos con velocidades rápidas no deben abandonar la pantalla demasiado pronto, y los más lentos no deberían quedar demasiado rezagados. Si algún elemento se desplaza fuera del viewport, ajusta su posición inicial en el eje Y para que aparezca correctamente en pantalla. Este ajuste es especialmente relevante en secciones que no están al inicio de la página.
Con estas configuraciones y pruebas, tendrás una base sólida para experimentar con técnicas más avanzadas de Scroll Speed.
Creating Parallax with Scroll Speed in Framer (Animation Lesson 9)
Técnicas avanzadas de Scroll Speed
Con los conceptos básicos ya establecidos, es hora de explorar técnicas más detalladas para llevar tus animaciones al siguiente nivel.
Crear efectos de paralaje multicapa
El efecto de paralaje multicapa añade una sensación de profundidad al aplicar diferentes valores de Scroll Speed a varias capas. La idea es simple: los elementos del fondo deben moverse más lentamente que los del primer plano, simulando cómo percibimos la distancia en el mundo real.
Para conseguir este efecto, ajusta los rangos de velocidad según la posición de cada capa: fondo, intermedio y primer plano. Esto crea la ilusión de que algunos objetos están más cerca del espectador, mientras otros parecen más lejanos. Es importante que los elementos hijos tengan un posicionamiento absoluto, lo que permite definir coordenadas X e Y específicas.
En las secciones intermedias, puedes calcular manualmente el offset utilizando esta fórmula:
Offset = Píxeles Arriba × (1 - Velocidad del Hijo) + Posición Base
Esta fórmula asegura que los elementos aparezcan en el momento adecuado, evitando que queden fuera del área visible. Una vez que domines esta técnica, puedes añadir transformaciones adicionales para enriquecer la experiencia visual.
Combinar Scroll Speed con Scroll Transform
La combinación de Scroll Speed y Scroll Transform abre la puerta a animaciones más dinámicas. Mientras que Scroll Speed regula la velocidad de movimiento, Scroll Transform te permite modificar propiedades como la opacidad, escala o rotación mientras el usuario hace scroll.
Primero, ajusta las velocidades para crear profundidad. Luego, aplica Scroll Transform para definir cambios en opacidad, escala o rotación. Por ejemplo, puedes empezar con una opacidad del 0% y una escala de 0,5, y terminar con una opacidad del 100% y una escala de 1,0. Para sincronizar ambos efectos, utiliza el trigger "Section in View" en lugar de "On Scroll", ya que esto vincula las transformaciones al contenedor padre y reduce la carga sobre el sistema.
Consejos de rendimiento para animaciones de scroll
Para garantizar un rendimiento óptimo, establece alturas fijas en píxeles para los contenedores principales (por ejemplo, 800px). Evita unidades como vh, fill o fit, ya que estas dependen del tamaño del viewport, lo que podría causar inconsistencias en los cálculos de scroll entre diferentes dispositivos.
Además, prioriza el uso de triggers "Section in View", que limitan el procesamiento únicamente a las secciones visibles en pantalla. En escenas más complejas, considera incluir un frame invisible que funcione como una "línea de tiempo" para las animaciones. Una vez que la animación haya terminado, ajusta la opacidad del frame a 0 para que no sea visible, pero mantenga su funcionalidad.
Conclusión
Después de repasar estas técnicas avanzadas, es momento de destacar los puntos más importantes. Scroll Speed convierte páginas estáticas en experiencias visuales dinámicas. Al asignar diferentes velocidades a cada capa, puedes crear efectos de profundidad que simulan cómo percibimos el movimiento en la vida real: los objetos cercanos parecen moverse más rápido que los lejanos.
Has aprendido a manejar herramientas clave, como ajustar valores de velocidad y calcular offsets manuales mediante la fórmula:
Offset = Píxeles Arriba × (1 - Velocidad del Hijo) + Posición Base. Estas técnicas te permiten tener un control detallado sobre el ritmo de tus animaciones. Para lograr un efecto de profundidad convincente, utiliza velocidades más bajas en los fondos y más altas en el primer plano.
Para obtener resultados consistentes, es fundamental establecer alturas fijas en píxeles para los contenedores y aplicar posicionamiento absoluto a los elementos hijos. Además, si decides combinar Scroll Speed con Scroll Transform, asegúrate de optimizar el rendimiento para garantizar una experiencia fluida en cualquier dispositivo.
La clave está en experimentar. Ajusta valores, sincroniza capas y busca el equilibrio perfecto entre impacto visual y facilidad de uso. Así, podrás crear sitios web que no solo sean atractivos, sino también fáciles de navegar y agradables para el usuario.
FAQs
¿Por qué mi Scroll Speed no se ve bien en el canvas pero sí en Preview?
Si el efecto no funciona como debería, puede deberse a una configuración incorrecta o a discrepancias entre el diseño en el lienzo y la vista previa. Comprueba lo siguiente: ajusta los parámetros del efecto, verifica que la sección esté correctamente configurada y asegúrate de que tenga un nombre asignado de forma adecuada. Esto ayudará a que el efecto funcione correctamente.
¿Qué valores de Scroll Speed recomiendan para fondo, medio y primer plano?
Para crear un efecto visual con mayor profundidad en Framer, se recomienda configurar la velocidad de desplazamiento (Scroll Speed) de la siguiente manera:
Fondo: alrededor del 40%.
Medio: aproximadamente 80%.
Primer plano: cerca del 120%.
Estos valores sirven como punto de partida, pero puedes ajustarlos según el efecto que desees lograr para añadir más dinamismo y realismo a tus proyectos.
¿Cómo calculo el offset para que un elemento aparezca en el punto correcto?
Cuando trabajas con Scroll Speed en Framer, es importante ajustar la posición inicial del elemento en función de su velocidad de desplazamiento. Esto garantiza que el elemento aparezca exactamente en el lugar que deseas mientras el usuario hace scroll.
La clave está en comprender cómo la velocidad de desplazamiento afecta la posición visual del elemento. A partir de ahí, puedes aplicar una fórmula que sincronice el movimiento del scroll con la posición que quieres que el elemento tenga en pantalla. Este ajuste asegura una experiencia visual fluida y precisa.