Activador de scroll
Las animaciones de activador de scroll vinculan una propiedad CSS a cuánto ha avanzado un elemento al hacer scroll por la pantalla. En lugar de "reproducir una vez cuando es visible" (eso es una animación de entrada), el aspecto del elemento es una función directa de la posición del scroll: al bajar, el efecto avanza; al subir, se revierte. Esta es la familia detrás de zooms, desvanecidos, barridos, revelados, escenas de scroll ancladas y scrubbing de vídeo.
Míralo en acción: las plantillas Basic parallax y Hero translate elements.
Míralo en acción: Scroll animations en fancyanimations.com.
Cómo funciona
Cada elemento que lleva una animación de activador de scroll se mide una vez por fotograma. Su
progreso a través del viewport (llamado p) va de 0 (su borde superior toca la parte inferior de
la pantalla) a 1 (su borde inferior sale por la parte superior de la pantalla) — 0.5 significa
que está más o menos centrado en la pantalla.
Cada fila de animación que añades (un "preset") convierte ese progreso crudo en una propiedad CSS, dentro de la ventana de inicio/fin que le des.
Presets
Cada preset escribe exactamente una propiedad CSS. Esto importa: dos presets que escriben la
misma propiedad en el mismo elemento (dos que usan transform, por ejemplo) se pelearán entre sí
— solo gana uno. Si necesitas combinar efectos, pon el segundo en un elemento hijo, o usa custom
(ver Matemática del scroll y CSS personalizado) para controlar varias
propiedades desde una sola fila.
| Preset | Qué anima |
|---|---|
| Zoom | Escala |
| Fade | Opacidad |
| Left to right / Right to left | Deslizamiento horizontal |
| Top to bottom / Bottom to top | Deslizamiento vertical |
| Rotate | Una rotación completa |
| Sweep (bottom, top, left, right, centre horizontal, centre vertical) | Un barrido/revelado usando un clip |
| Circle | Un revelado circular, creciendo desde el centro |
| Blinds | Tres franjas verticales que se revelan como persianas |
| Text reveal (black o white) | El texto se revela mediante una banda de color en movimiento |
| Video scrub | La posición de reproducción actual del vídeo (ver Video scrub) |
| Custom | No anima nada por sí mismo — solo expone una variable de scroll para tu propio CSS |
Opciones sutiles para texto de cuerpo y contenido de apoyo: Fade, o un deslizamiento suave. Reserva los efectos de zoom, rotación y barrido para visuales hero y divisores de sección.
La ventana: Start, End, From, To, Invert
Cada fila tiene una ventana que mapea el progreso crudo del scroll a la salida del preset:
Una fila de animación en Bricks: un preset y su ventana.
| Campo | Significado | Vacío significa |
|---|---|---|
| Start | Posición del scroll donde empieza la animación | 0 (inicio del recorrido) |
| End | Posición del scroll donde está completa | 100 (final del recorrido) |
| From | El valor más bajo que produce la animación | 0 |
| To | El valor más alto que produce la animación | 100 |
| Invert | Ejecuta la salida al revés (To → From en vez de From → To) | Desactivado |
Start, End, From y To solo aceptan múltiplos de 5 (5, 10, 15 … 95). Cualquier otro valor no tiene efecto y la fila vuelve silenciosamente a su rango completo por defecto. El mapeo entre Start/End y la salida es lineal — no hay curva de easing, excepto para "Reverse" (más abajo), que alcanza su pico en la mitad de la ventana en lugar de avanzar de forma recta.
Una ventana que se sienta natural, sin un escenario anclado, es Start alrededor de 5–10 y End alrededor de 40–60 (End 40 para elementos muy altos). Repartirla por todo el rango (0 a 100) hace que el efecto se sienta lento y difuso.
Elementos ya en pantalla cuando se carga la página
Un hero alto que llena la pantalla al cargar ya está a mitad de su propio recorrido de scroll antes
de que el visitante haya hecho scroll siquiera — un hero de 100vh, por ejemplo, empieza en
p = 50. Si tu ventana empieza en 0, la primera mitad de la animación ya se ha reproducido
efectivamente y el visitante nunca la ve.
Start at page top soluciona esto por ti: actívalo en cualquier elemento que sea visible al
cargar (un hero, o cualquier cosa sobre el pliegue) y su recorrido se mide desde el momento en que
carga la página, así que 0 es el primer scroll — puedes usar las mismas ventanas habituales
(Start 5–10, End 40–60) que usarías en cualquier otro sitio.
No lo uses en un elemento dentro de una escena de scroll anclada — ahí, el propio anclaje ya empieza exactamente al cargar, y activar esto reescalaría todo el recorrido y movería tus filas fuera de sitio. Es para elementos visibles-al-cargar que no están anclados.
Si estás en una versión más antigua sin esta opción, haz que la ventana empiece en el valor que ya tiene el elemento cuando carga la página, en vez de en 0 — un hero de 100vh necesita Start 50; una escena anclada de 300vh (anclada al 25–75%) necesita Start 25, y así sucesivamente.
Ajustes del elemento
| Ajuste | Efecto |
|---|---|
| I am parent container | Marca este elemento como la caja de medición para los elementos descendientes que usen "Get parent" más abajo |
| Get parent | Mide el progreso contra el ancestro "I am parent" más cercano en lugar de contra sí mismo — esencial dentro de escenas ancladas |
| Reverse | Convierte la fila en un viaje de ida y vuelta: alcanza su pico en la mitad de la ventana en lugar de avanzar de forma recta |
| Disable from tablet / Disable from mobile | Desactiva la animación en ≤991px / ≤767px — el elemento muestra su estado normal, sin animar |
| Start at page top | Desde 3.2.0 — ver arriba |
| Allow own transitions | Desde 3.2.0 — ver Transiciones propias más abajo |
| Scroll smoothing | Ver Suavizado del scroll más abajo |
- Bricks
- Etch
- Gutenberg
Pestaña Style → ScrollTrigger Animations. Añade filas para animar el elemento — cada fila es un preset con su propio Start/End/From/To/Invert. Los demás ajustes del elemento mencionados arriba (I am parent, Get parent, Reverse, Disable from tablet/mobile, Start at page top, Allow own transitions, Scroll smoothing) son interruptores y selectores en el mismo panel.
La parte superior del panel: los ajustes del elemento.
Nada se anima en el lienzo de Bricks hasta que activas el botón FA en la barra de herramientas del builder ("Enable/disable Fancy Animations"). Está desactivado cada vez que reabres el builder — no se recuerda. Con él desactivado, el activador de scroll se pausa por completo para que puedas editar sin que la página salte de un lado a otro.
Cada ajuste de aquí es una clase añadida al elemento desde el panel Fancy → ScrollTrigger Animations. El panel muestra nombres amigables; él escribe las clases por ti.
El lienzo de Etch tiene su propio interruptor de barra de herramientas para Fancy Animations (activado por defecto, recordado por navegador).
Activa primero "Gutenberg blocks (Beta)" en Ajustes de animación — sin eso, no aparece ningún control de Fancy en el editor de bloques. Luego, en la barra lateral del bloque: panel Scroll Trigger Animations, con "Enable scroll trigger" como interruptor maestro — no se emite nada a menos que esté activado.
Para añadir un segundo preset al mismo bloque, escribe su clase extra a mano en Advanced → Additional CSS class(es): el panel de la barra lateral solo configura un preset por bloque.
Transiciones propias
A todo elemento con una clase de activador de scroll se le añade automáticamente
transition: all 0s !important. Esto es deliberado: sin ello, la primera vez que el navegador lee
las variables de scroll, una transición del tema podría hacer que el elemento se deslizara
visiblemente hasta su posición inicial en lugar de simplemente aparecer ahí.
El efecto secundario: también elimina las transiciones de hover y focus propias del elemento — un botón dentro de una escena anclada, por ejemplo, perdería su animación de hover por completo, incluso en una propiedad que el scroll nunca toca.
Allow own transitions reincorpora todo el elemento: sus propias transiciones CSS vuelven a
reproducirse. Úsalo cuando el elemento necesite una transición de hover o focus en una propiedad
que el scroll en sí no controla, y luego acota tu propio transition solo a esas propiedades (p.
ej. transition: background-color .3s, color .3s;) — nunca transition: all, o la propiedad
controlada por el scroll empezaría a quedarse rezagada respecto al scroll también.
En versiones más antiguas (o si prefieres no usar esta opción), pon el efecto de hover en un elemento hijo o contenedor que no tenga su propia clase de activador de scroll — nunca recibe el reseteo general de transiciones.
Suavizado del scroll
El navegador hace scroll en píxeles enteros. Cuando una rueda de ratón se ralentiza, la página puede avanzar 1 píxel en un fotograma y 0 en el siguiente. Para la mayoría de las animaciones eso es invisible, pero para cualquier cosa amplificada — una pista horizontal que viaja mucho más lejos que el propio scroll de la página, por ejemplo — esos pasos de un solo píxel se convierten en un tartamudeo visible.
El suavizado del scroll hace que el progreso de cada elemento se acerque gradualmente a la posición real del scroll en lugar de saltar a ella de inmediato, lo que oculta el tartamudeo. Es un valor por defecto a nivel de sitio (ver Ajustes de animación), con una anulación por elemento:
| Valor | Efecto |
|---|---|
| (por defecto) | Usa el valor a nivel de sitio |
| Off | Sigue el scroll exactamente, sin suavizado |
| Un tiempo, de 0.05s a 0.5s | Cuánto tarda en alcanzarlo — cuanto más alto, más suave pero más lento |
Dale a dos elementos que deben mantenerse perfectamente sincronizados (una barra de progreso junto a la galería que sigue, por ejemplo) el mismo valor de suavizado, o se irán desfasando uno del otro. Video scrub (Video scrub) tiene su propio easing e ignora este ajuste por completo.
Vídeo explicativo
Problemas comunes
- Una animación de hero se ve como si ya hubiera reproducido la mitad al abrir la página. La ventana empieza antes del valor real de scroll del elemento al cargar. Usa Start at page top (3.2.0+), o haz que la ventana empiece en el valor de carga manualmente (ver la tabla arriba).
- Una transición de hover o focus en el elemento ha dejado de funcionar. A todo elemento con activador de scroll se le resetean sus transiciones. Activa Allow own transitions (3.2.0+), o mueve el efecto de hover a un hijo sin clase de activador de scroll.
- Dos efectos en un elemento, solo uno de ellos se mueve. Ambos presets escriben la misma
propiedad CSS (normalmente
transformoclip-path). Mueve uno a un hijo, o combínalos con una fila custom. - Un valor de Start/End/From/To parece no hacer nada. Solo son válidos los múltiplos de 5 (5 a 95). Cualquier otra cosa vuelve silenciosamente al rango completo por defecto.
- El progreso del elemento parece desviarse o saltar mientras anima. El plugin mide la caja del elemento después de que se aplique cualquier transform — si el elemento animado (o su ancestro "I am parent") está siendo transformado él mismo, su propia medición sigue cambiando. Mantén el elemento medido sin transformar y anima un hijo en su lugar.
- Nada se anima en el lienzo de Bricks. El interruptor de previsualización FA de la barra de herramientas está desactivado — siempre empieza desactivado al reabrir el builder.