GSAP (GreenSock Animation Platform) は、ウェブページのアニメーションを作成するための強力なツールです。私のサイトのアニメーションもGSAPを使用しています。
今回は、GSAPを使用してスムーズにセクション間を遷移する方法を紹介します。
実際の動きは下記のようになります。

See the Pen Animated Continuous Sections with GSAP Observer by GreenSock (@GreenSock) on CodePen.

めちゃくちゃオシャレでカッコいいですね！

実装の概要:

今回紹介するコードは、ウェブページ上の各セクション間をアニメーションで切り替えることを目的としています。ユーザーがホイールをスクロールしたり、画面をスワイプしたりすることで、次または前のセクションに遷移します。

基本的なセットアップ:

まず、必要な要素を変数として取得します。

let sections = document.querySelectorAll("section");
let images = document.querySelectorAll(".bg");
let headings = gsap.utils.toArray(".section-heading");

.outerと.innerのクラスを持つ要素は、遷移のアニメーションで使用されるため、それぞれの位置を初期設定で調整します。

gsap.set(outerWrappers, { yPercent: 100 });
gsap.set(innerWrappers, { yPercent: -100 });

gotoSection関数:

この関数は指定されたセクションに遷移するためのものです。アニメーションの方向（上か下）も考慮されます。この関数内で、各セクションの表示や非表示、テキストや画像のアニメーションなどが実行されます。

Observerの活用:

GSAPのObserverプラグインを使用して、ユーザーのインタラクションに応じてアニメーションを制御します。このObserverは、ユーザーがホイールをスクロールしたり、タッチしたりしたときにアクションを実行します。

Observer.create({
  type: "wheel,touch,pointer",
  wheelSpeed: -1,
  onDown: () => !animating && gotoSection(currentIndex - 1, -1),
  onUp: () => !animating && gotoSection(currentIndex + 1, 1)
});

まとめ:

GSAPを利用することで、ウェブページに追加の動的要素やアニメーションを簡単に追加することができます。今回紹介したセクション遷移の例は、その可能性の一部に過ぎません。GSAPの文書化やコミュニティを参考に、さらに多くのクリエイティブなアニメーションを探求してみてください。