Anatomía

La sección exterior contiene un contenedor de ancho completo dividido en un sidebar izquierdo de 220px y una columna derecha en flex-column. El sidebar es sticky (top: 30vh) e incluye una pista de progreso (2px de ancho, relleno scaleY con color de acento), un contador de paso animado, un título de paso animado y una fila de indicadores de puntos. La columna derecha renderiza un StepCard por paso, cada uno con una tarjeta decorativa de cuadrícula de puntos, una línea horizontal, un título, un párrafo de descripción y un detalle destacado con sangría.

Cómo funciona

Un containerRef envuelve la cuadrícula de dos columnas. useScroll apunta a esa ref con offset ['start 0.6', 'end 0.6'], por lo que scrollYProgress va de 0 a 1 mientras la sección pasa la marca del 60% del viewport. useTransform mapea ese valor de 0 a 1 a un motion value scaleY para el relleno de la barra de progreso. useMotionValueEvent escucha scrollYProgress en cada cambio y calcula el índice del paso activo como Math.floor(v * steps.length), limitado a los rangos válidos. AnimatePresence mode='wait' hace luego el crossfade del número y del título en el sidebar. Cada StepCard usa whileInView con un margin de viewport de -15% para que entre solo cuando está bien dentro del viewport.

Cómo crearlo en React

1. Configurar el contenedor de scroll y derivar scrollYProgress

   Asigna una ref al div de la cuadrícula de dos columnas y pásala a useScroll. La tupla offset le indica a Framer Motion cuándo empezar y terminar el rango de progreso, 'start 0.6' se dispara cuando la parte superior del contenedor cruza el 60% de la altura del viewport.

   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: containerRef,
     offset: ["start 0.6", "end 0.6"],
   });

2. Mapear el progreso al relleno scaleY y al índice del paso activo

   useTransform convierte el valor de progreso de 0 a 1 en un scaleY para la barra de acento. useMotionValueEvent se dispara en cada tick de scroll y calcula qué paso está activo con un simple floor + clamp. Almacenar activeStep en useState vuelve a renderizar el sidebar de forma limpia sin afectar al listener de scroll.

   const scaleY = useTransform(scrollYProgress, [0, 1], [0, 1]);
   const [activeStep, setActiveStep] = useState(0);
   
   useMotionValueEvent(scrollYProgress, "change", (v) => {
     setActiveStep(Math.max(0, Math.min(Math.floor(v * steps.length), steps.length - 1)));
   });

3. Hacer el crossfade del contador de pasos con AnimatePresence

   Envuelve el número animado y el título cada uno en su propio AnimatePresence con mode='wait'. Asigna a cada motion.span una key igual a activeStep para que Framer Motion desmonte el elemento antiguo antes de montar el nuevo. La animación de salida (y: -20) y la de entrada (y: 20 hacia 0) crean una sensación fluida de ticker.

   <AnimatePresence mode="wait">
     <motion.span
       key={activeStep}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.35 }}
     >
       {steps[activeStep]?.number}
     </motion.span>
   </AnimatePresence>

4. Animar la entrada de las tarjetas de paso con whileInView

   Cada StepCard envuelve su contenido en un motion.div con initial={{ opacity: 0, y: 40 }} y whileInView={{ opacity: 1, y: 0 }}. El margin de viewport de -15% garantiza que la tarjeta solo entre una vez que está realmente dentro del área visible, no justo en el borde. Pon once: true para que la animación no se repita al volver a hacer scroll.

   <motion.div
     initial={{ opacity: 0, y: 40 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: "-15%" }}
     transition={{ duration: 0.65, ease: [0.16, 1, 0.3, 1] }}
   >

Cuándo usarlo

Usa esta sección cuando tengas entre 3 y 5 pasos concretos que se beneficien de una revelación pausada, flujos de onboarding, metodologías de servicio, workflows de producto. Funciona mejor en el centro de una página después de una sección de features, dando contexto sobre cómo funciona algo realmente. Evítala cuando los pasos no tengan un orden natural, cuando tengas más de 5 pasos (el número del sidebar pierde sentido), o cuando tus usuarios sean principalmente mobile-first (el diseño de dos columnas requiere un manejo responsive cuidadoso).

Usado por

• Linear, Usa sidebars sincronizados con el scroll y callouts de features sticky para recorrer su workflow de seguimiento de issues en el sitio de marketing.
• Stripe, Varias páginas de producto usan una columna izquierda sticky con un panel derecho desplazable para explicar procesos de integración de varios pasos.
• Notion, La sección 'Cómo funciona' de su homepage usa un contador de pasos sticky que avanza mientras haces scroll por las explicaciones de features.
• Loom, Revelación de pasos guiada por el scroll con un indicador de progreso persistente en el sidebar para guiar a los prospectos por la propuesta de valor del producto.

FAQ