スクロール連動のアニメーションを、要素の数だけ伸ばす — animation-range に CSS 変数を入れる

.mem {
    /* svh = 画面の高さ1つぶん。320svh は画面3.2個ぶんの縦長ということ */
    height: 320svh;              /* スクロールの長さ */
    /* この要素が画面を通り過ぎる進み具合を、--mem という名前のものさしにする */
    view-timeline: --mem block;
}
.words {
    /* both = 出番の区間の外では、端のキーフレームの見た目のまま止まる */
    animation: cWords auto linear both;
    animation-timeline: --mem;   /* 時間ではなく上の --mem を再生ヘッドに使う */
    animation-range: cover 0% cover 76%;   /* 言葉が出て、消えるまで */
}

// 使い捨ての div を作って、変数入りの animation-range を実際に当ててみる
const el = document.createElement('div');
el.style.cssText = '--i:1; --n:3; animation-range: cover calc(76% / var(--n) * var(--i)) cover calc(76% / var(--n) * (var(--i) + 1));';
document.body.appendChild(el);   // ページに入れないとブラウザが計算してくれない
// getComputedStyle = ブラウザが計算し終えた「後」の値を読む。76% / 3 * 1 が数字で返れば成功
getComputedStyle(el).animationRangeStart;  // "cover 25.3333%"

// 声が何個あるかを --voices で CSS へ渡す。as CSSProperties は
// 「-- で始まる独自の変数名も許して」と TypeScript に断るための型注記
<section className={styles.mem} style={{ "--voices": blocks.length } as CSSProperties}>
    {blocks.map((block, k) => (
        // --i = この声が何番目か（0 始まり）。CSS はこれで自分の持ち分を決める
        <div key={k} className={styles.words} style={{ "--i": k } as CSSProperties}>
            ...
        </div>
    ))}
    <div className={styles.ph}>{/* 写真 */}</div>
</section>

.mem {
    /* 声1つあたり 320svh。声が増えたら距離のほうを伸ばす。
       あとで割り算に使うので、ここでは単位を付けずに数値だけ持つ */
    --mem-h: calc(320 * var(--voices, 1));
    /* cover の全行程 = 要素の高さ + ビューポート1つぶん（= +100）。
       その全行程のうち「最後の声が消え終わる位置」が何%かを出している */
    --voice-end: calc((var(--mem-h) - 1) / (var(--mem-h) + 100) * 100%);
    /* それを声の数で割った、声1つぶんの持ち分 */
    --step: calc(var(--voice-end) / var(--voices, 1));
    height: calc(var(--mem-h) * 1svh);   /* ここで初めて svh を掛けて実際の長さにする */
    view-timeline: --mem block;
}
 
.words {
    /* 声はすべて画面の上端に張り付いたまま、その場で出番を待つ */
    position: sticky;
    top: 0;
    height: 100svh;
    animation: cWords auto linear both;
    animation-timeline: --mem;
    /* k 番目の声は「持ち分 k 個ぶん進んだところ」から「k+1 個ぶん」までが出番 */
    animation-range:
        cover calc(var(--step) * var(--i, 0))
        cover calc(var(--step) * (var(--i, 0) + 1));
}

.phImg {
    animation-range:
        /* 開始 = 最後の声の出番の頭（持ち分 × (声の数 - 1)）から、さらに持ち分の 10.5% ぶん進んだところ */
        cover calc(var(--step) * (var(--voices, 1) - 1) + var(--step) * 0.105)
        /* 終了 = 最後の声が消え終わったあと、持ち分の 7.9% ぶん遅れて */
        cover calc(var(--voice-end) + var(--step) * 0.079);
}

getComputedStyle(mem).getPropertyValue('--step');
// "calc(calc((calc(320 * 3) - 1) / (calc(320 * 3) + 100) * 100%) / 3)"
 
getComputedStyle(words).animationRangeStart;
// "cover 60.3145%"