GSAPを使って横スクロールとセクションのアニメーションを実装する方法

<section class="section" id="sectionA">
  <div class="main-content">
    <h2>Main Content of Section A</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <!-- コンテンツ省略 -->
  </div>
  <div class="sidebar">
    <h3>Sidebar Content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <!-- コンテンツ省略 -->
  </div>
</section>

<!-- セクション C, D も同様の構造で記述 -->

/* 各セクションの基本スタイル */
.section {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

/* サイドバーの共通スタイル */
.sidebar {
  flex: 1;
  padding: 20px;
  background-color: #e9e9e9;
  border-left: 1px solid #ccc;
  position: sticky;
  top: 20px; /* ヘッダーとの距離 */
  align-self: flex-start; /* 上端に固定 */
  height: fit-content; /* コンテンツに合わせて高さを調整 */
}

/* サイドバーの見出しスタイル */
.sidebar h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* メインコンテンツの共通スタイル */
.main-content {
  flex: 3;
  padding: 20px;
  background-color: #f9f9f9;
  height: 200vh; /* 高さを200vhに設定 */
}

/* メインコンテンツの見出しスタイル */
.main-content h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

/* メインコンテンツの段落スタイル */
.main-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
}

<section class="section" id="sectionB">
  <h2>横にスクロールするセクション</h2>
  <div class="horizontal-scroll">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
    <div class="scroll-item">Item 4</div>
    <div class="scroll-item">Item 5</div>
    <div class="scroll-item">Item 6</div>
  </div>
</section>

#sectionB {
  height: 100vh; /* 画面の高さいっぱいにセクションを表示 */
  overflow-x: auto; /* 横方向のスクロールを許可 */
  white-space: nowrap; /* 子要素が横並びになるように設定 */
}

.horizontal-scroll {
  display: flex; /* アイテムを横に並べるための flexbox */
}

.scroll-item {
  flex: 0 0 600px; /* 各アイテムの幅を固定 */
  height: 600px; /* アイテムの高さを設定 */
  background-color: #ddd; /* アイテムの背景色 */
  border: 1px solid #ccc; /* アイテムの境界線 */
  margin-right: 10px; /* アイテム間の間隔 */
  text-align: center; /* アイテム内のテキストを中央揃え */
  line-height: 600px; /* アイテム内のテキストの垂直中央揃え */
}

<section id="sectionContact">
  <div id="contactBackground">
    <div class="scroll-container">
      <div class="custom-item">Item 1</div>
      <div class="custom-item">Item 2</div>
      <div class="custom-item">Item 3</div>
      <div class="custom-item">Item 4</div>
      <div class="custom-item">Item 5</div>
      <div class="custom-item">Item 6</div>
    </div>
  </div>
  <button class="contact-button">お問い合わせはこちら</button>
</section>