Anatomie

La section repose sur un CSS Grid à trois colonnes : une grande colonne de contenu de chaque côté et une colonne centrale de 40px pour le connecteur. Une ligne verticale de 2px traverse toute la hauteur du conteneur, positionnée en absolu à 50%. Chaque ligne place sa carte d'article dans la colonne 1 ou 3 selon son index, tandis que la colonne 2 contient un point de 14px centré au-dessus de la carte. Le premier point utilise la couleur d'accent ; les suivants reprennent le token de bordure. Chaque carte contient une image 16:9, un label de catégorie, un titre, un extrait, un badge de date et une icône flèche.

Comment ça marche

Chaque ligne d'article est une motion.div avec un état initial `opacity: 0` et `x: -30` (cartes gauches) ou `x: 30` (cartes droites). Quand l'élément entre dans le viewport, whileInView le pilote vers `opacity: 1, x: 0`. La transition utilise un easing cubic-bezier personnalisé `[0.16, 1, 0.3, 1]` avec une durée de 600ms, et le délai est calculé comme `index * 0.08` secondes pour créer le décalage. Le flag `once: true` garantit que l'animation ne se joue qu'une seule fois par carte, sans se redéclencher au scroll retour.

Comment le coder en React

1. Mettre en place le conteneur en grille trois colonnes

   Enveloppe chaque ligne d'article dans un div avec `display: grid` et `gridTemplateColumns: '1fr 40px 1fr'`. Place une ligne verticale de 2px en absolu à 50% du conteneur pour qu'elle passe derrière toutes les lignes. Cette seule définition de grille gère le placement des cartes côté gauche et côté droit.

   <div style={{ position: "relative", maxWidth: "900px", margin: "0 auto" }}>
     {/* Center line */}
     <div aria-hidden style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 2 }} />
     {articles.map((article, i) => (
       <div style={{ display: "grid", gridTemplateColumns: "1fr 40px 1fr" }} key={i}>
         {/* card + dot + spacer */}
       </div>
     ))}
   </div>

2. Alterner les côtés avec l'index

   Dérive un booléen `isLeft` depuis `i % 2 === 0`. Place la carte dans `gridColumn: isLeft ? '1' : '3'` et l'espaceur vide dans la colonne opposée. Le point se trouve toujours dans la colonne 2. Cela maintient un ordre de markup cohérent quelle que soit la position de la carte.

   const isLeft = i % 2 === 0;
   // Card
   <div style={{ gridColumn: isLeft ? "1" : "3" }}>...</div>
   // Dot
   <div style={{ gridColumn: "2", display: "flex", justifyContent: "center" }}>
     <div style={{ width: 14, height: 14, borderRadius: "50%", background: i === 0 ? "var(--color-accent)" : "var(--color-border)" }} />
   </div>
   // Spacer
   <div style={{ gridColumn: isLeft ? "3" : "1" }} />

3. Ajouter l'entrée décalée au scroll

   Convertis chaque div de ligne en motion.div et règle le décalage x initial selon isLeft. Le délai multiplié par l'index crée l'effet cascade. Garde une marge viewport de -50px pour que l'animation démarre avant que l'élément soit totalement visible, donnant à la page un sentiment de flux continu.

   const EASE = [0.16, 1, 0.3, 1] as const;
   
   <motion.div
     initial={{ opacity: 0, x: isLeft ? -30 : 30 }}
     whileInView={{ opacity: 1, x: 0 }}
     viewport={{ once: true, margin: "-50px" }}
     transition={{ duration: 0.6, delay: i * 0.08, ease: EASE }}
     style={{ display: "grid", gridTemplateColumns: "1fr 40px 1fr" }}
   >

4. Construire la carte d'article

   Chaque carte est une balise ancre avec une image 16:9 en haut, suivie d'une zone de contenu avec padding. Le label de catégorie utilise le token de couleur d'accent avec uppercase et letter-spacing. La date et la flèche se trouvent dans une flex row en bas. Garde la carte comme un seul `<a>` pour que toute la surface soit cliquable sans éléments interactifs imbriqués.

Quand l'utiliser

Utilise le layout timeline quand tu veux présenter une série d'articles avec un sens de chronologie ou de progression narrative : pages d'index blog, changelogs produit, listings d'études de cas. Évite-le pour les catalogues plats où tous les items ont le même poids et où la comparaison prime sur la séquence. Sur mobile, les colonnes alternées se replier en une seule colonne, donc teste le layout empilé avant de mettre en production.

Utilisé par

• Stripe, Le blog Stripe utilise un layout éditorial chronologique avec des structures de cartes cohérentes qui mettent en avant la date et la catégorie avant le titre.
• Vercel, Le changelog et le blog de Vercel listent les articles avec les tags de catégorie et les dates bien visibles, ce qui correspond à l'anatomie de carte d'une section timeline.
• Linear, La page changelog de Linear est une timeline verticale avec des blocs de contenu alternés, chacun ancré à une date et connecté par une ligne centrale.
• Framer, Le flux d'updates de Framer organise les notes de version en timeline chronologique avec des cartes et des marqueurs de date sur un axe vertical.

FAQ