パターン1

パターン2

パターン3

HTML

<div class="main-title">
  <h1 class="js_1">タイトルテキスト</h1>
  <span class="line js_1-2"></span>
</div>
<!-- /.main-title -->

gsapで指定する要素を明確にするために、js独自のクラスを記述します。ここではテキストのアニメーションには.js_1並びに、ラインのアニメーションには.js_1_2としています。(名前は任意)

SCSS

.main-title {
  width: fit-content;
  margin-bottom: 50px;

  &.overflow-hidden {
    overflow: hidden;
  }
}

h1 {
  span {
    will-change: transform;
    font-weight: bold;
    font-size: 30px;
    display: inline-block;
  }
}

.line {
  width: 100%;
  display: block;
  border: 0.5px solid #0c1c24;

  &-center {
    width: 100%;
    display: block;
    border: 0.5px solid #0c1c24;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  &-right {
    width: 100%;
    display: block;
    border: 0.5px solid #0c1c24;
    position: absolute;
    right: 0;
  }
}

ラインが消える表現として、main-titleにoverflow: hidden;を使用しています。こちらを指定しないとこのようになります。

パターン2

main-titleをwidthをコンテンツの幅に設定しておくことも重要です。ここではfit-contentを使用しています。

Javascript

export function txtSpan(el) {
  const titleElement = document.querySelector(el),
    titleTexts = titleElement.textContent.split("");

  titleElement.textContent = "";
  let outputTexts = "";
  titleTexts.forEach(
    (text) => (outputTexts += text === " " ? " " : `<span>${text}</span>`)
  );
  titleElement.innerHTML = outputTexts;
}


txtSpan(".js_1");

まずは、タイトルを一つずつspanタグで囲みます。ここでは、上記のような方法で設定しています。そして、spanタグをdisplay:inline-block;に変更し、アニメーションを設定していきます。※spanタグがinlineのままだと、アニメーションがうまく機能しません。