Anatomie

Une section pleine largeur contient un header centré (h2 + sous-titre) et une colonne contrainte (max 680px). Dans cette colonne, un SVG est positionné en absolu sur le bord gauche, large de 2rem, couvrant toute la hauteur. Il superpose deux chemins identiques : un path gris statique comme rail, et un motion.path de couleur accent dont le pathLength s'anime de 0 à 1. Les cartes d'étapes se placent à droite du SVG, chacune avec un cercle numéroté positionné en absolu en alignement avec le tracé.

Comment ça marche

La clé repose sur la motion value pathLength de Framer Motion. Une ref sur le conteneur principal est passée à useScroll avec l'offset ['start 0.75', 'end 0.6'], ce qui fait passer scrollYProgress de 0 à 1 quand le conteneur traverse le viewport. useTransform mappe directement ce 0-1 vers un pathLength 0-1. En l'appliquant à un motion.path, Framer Motion anime la propriété CSS stroke-dashoffset, le mécanisme natif du navigateur pour tracer les SVG progressivement. Chaque carte d'étape entre en fondu via whileInView, avec un décalage par index.

Comment le coder en React

1. Calcule la géométrie du chemin depuis tes étapes

   Construis l'attribut d du SVG en mappant ton tableau de steps. Chaque étape est espacée de 180 unités verticalement dans un viewBox de 100 unités de large. Un cx=50 fixe maintient le trait centré sur la colonne SVG de 2rem.

   const cx = 50;
   const pathD = steps
     .map((_, i) => `${i === 0 ? "M" : "L"} ${cx} ${i * 180 + 20}`)
     .join(" ");

2. Relie le scroll au pathLength

   Attache une ref au div conteneur et passe-la à useScroll. Le tableau offset contrôle à quels moments du scroll l'animation commence et se termine. useTransform convertit le scrollYProgress brut 0-1 en motion value pathLength.

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

3. Affiche le SVG à deux couches

   Positionne un SVG en absolu à côté de la colonne des étapes. Trace d'abord le path gris statique en guise de rail visuel, puis le motion.path avec le style pathLength. Les deux partagent le même d. Mets preserveAspectRatio='none' pour que le trait s'étire à la hauteur réelle de la colonne quel que soit le nombre d'étapes.

   <motion.path
     d={pathD}
     stroke="var(--color-accent)"
     strokeWidth="3"
     strokeLinecap="round"
     style={{ pathLength }}
   />

4. Aligne les puces d'étapes sur le tracé

   Chaque carte d'étape a position:relative. À l'intérieur, un cercle positionné en absolu à left:-4.5rem correspond à la largeur de la colonne SVG plus l'espace. Un double box-shadow (couleur de fond puis couleur accent) crée l'effet de nœud sur la ligne sans élément DOM supplémentaire.

Quand l'utiliser

Utilise Process Path Draw quand tu as 3 à 5 étapes séquentielles et que tu veux donner du poids visuel à chacune au scroll. Il convient aux explications d'onboarding, aux sections méthodologie des sites d'agence et aux flows produit. Évite-le quand les étapes sont réellement parallèles ou quand la page est trop courte pour que le scroll déclenche l'animation de façon significative. Sur des pages avec beaucoup d'animations au scroll, teste le budget global pour éviter les ralentissements.

Utilisé par

• Stripe, Utilise des lignes de connexion verticales dans ses sections explicatives pour guider le regard à travers un flux de paiement multi-étapes.
• Linear, Des connecteurs animés entre étapes de workflow apparaissent sur ses pages features et changelog, renforçant l'idée de progression séquencée.
• Lottiefiles, Les animations de type path-draw sont un format mis en avant sur la plateforme, illustrant la technique dans les pages marketing.

FAQ