顧客の声（テスティモニアル）を並べたヒーローセクションは、多くのサイトで見かける定番の構成だ。しかし静的に並べるだけでは印象に残りにくい。CodropsのJonas Arlethが、GSAPのタイムラインとCMSデータを組み合わせ、動きと手作りの質感を両立させたテスティモニアル・ヒーローの構築手法を解説している。WebflowのDesignerを土台に、カウンター、コラージュのグリッド、アニメーションの3つを段階的に作り込む内容だ。
まず目を引くのが、スロットマシン風の数字カウンターである。単純に数値を加算するのではなく、各桁ごとに縦方向の数字の帯を作り、overflowを隠したセルの中で上へスライドさせる。桁ごとの回転を右から左の順で処理することで、数値の長さにかかわらず挙動を一定に保つ。回転数と時間を別々のパラメータとして扱い、で実際の行間を読み取ることで、ハードコー ドした値ではなく本物のタイポグラフィに沿った動きを実現している。
次にCMS駆動のコラージュ・グリッドだ。コレクションの並び順を変えるのではなく、やといったCSSの子セレクタで各要素に個別の幅と縦方向のオフセットを与える。さらにとを使い、すべての寸法をコンテナ幅に比例させることで、レイアウト全体が滑らかにスケールする。ラベルもで選択的に表示し、コラージュごとに1つだけ見せる工夫がなされている。
アニメーションはGSAPのタイムラインで、一度だけのフェードインと無限に繰り返す顔の入れ替えループの2つに分離される。メンバー画像の3D回転にはパースペクティブを1000に設定して奥行きを加え、入ってくる画像にはelasticイージングでばね状の動きを与える。テキストは行ごとに分割し、時間差で表示する。overlaidされたリスト間の瞬間的な切り替えにはsetアクションを用いている。
注目すべきは、アクセシビリティへの配慮が最初から組み込まれている点だ。が有効な環境では、繰り返しのループだけを無効化し、穏やかな入場フェードは残す。動きの過剰さを避けつつ、演出の意図は保つという判断である。ビジュアルなタイムライン、コンテナクエリ、子セレクタ、そして少量のJavaScript。既存のツールを丁寧に組み合わせるだけで、手の込んだ表現とCMSの柔軟性は両立できる。
出典: Building an Animated Testimonial Hero Using the GSAP Timeline and Dynamic CMS Data
