Custom Directiveを使ったJavaScriptアニメーションパターン

<div class="text-left overflow-hidden w-screen h-8" v-animateCoverOpen>
  SampleText~~~~
</div>
<div class="text-right overflow-hidden w-screen h-8" v-animateCoverOpen>
  ランダムな文字列が入ります〜〜〜
</div>

export const initCoverOpen = (el) => {
  // ディレクティブを付与した要素内に直接文字列が入っていた場合
  if (el.firstElementChild === null) {
    // インライン要素で文字列をラップする → カーテンのサイズに反映
    const span = document.createElement("span");
    span.textContent = el.firstChild.textContent.trim();
    el.removeChild(el.firstChild);
    el.insertAdjacentElement("afterbegin", span);
  }
  // ↑で作成したspan要素、もしくはデフォで入っていた要素のRectを取得
  const childRect = el.firstElementChild.getBoundingClientRect();
  // カバー要素を作成
  const div = document.createElement("div");
  gsap.set(div, {
    position: "absolute",
    left: childRect.left,
    width: childRect.width + "px",
    height: childRect.height + "px",
    backgroundColor: "#000000",
    willChange: "transform",
    // ディレクティブを付与した要素の開始タグ直後に挿入
    onComplete: () => el.insertAdjacentElement("afterbegin", div),
  });
};
export const animateCoverOpen = (el) => {
  // カバー要素を取得
  const firstChildRect = el.firstElementChild.getBoundingClientRect();
  gsap.to(el.firstElementChild, 1, {
    left: firstChildRect.width + firstChildRect.left,
    width: 0,
    // アニメーション後、カバー要素を削除
    onComplete: () => el.removeChild(el.firstElementChild),
  });
};

export const initCurtain = (el) => {
  if (el.firstElementChild === null) {
    const span = document.createElement("span");
    span.textContent = el.firstChild.textContent.trim();
    el.removeChild(el.firstChild);
    el.insertAdjacentElement("afterbegin", span);
  }
  const childRect = el.firstElementChild.getBoundingClientRect();
  const div = document.createElement("div");
  // ここで文字列要素(el.lastChild: span)を`opacity: 0`にします
  gsap.set(el.lastChild, {
    opacity: 0,
  });
  gsap.set(div, {
    position: "absolute",
    left: childRect.left,
    width: childRect.width,
    height: childRect.height + "px",
    backgroundColor: "#000000",
    willChange: "transform",
    onComplete: () => el.insertAdjacentElement("afterbegin", div),
  });
};
export const animateCurtain = (el) => {
  const firstChildRect = el.firstElementChild.getBoundingClientRect();
  // timelineを作成
  const tl = gsap.timeline();
  tl.set(el.firstElementChild, {
    width: 0
  }).to(el.firstElementChild, {
    // カーテンを開きます
    width: firstChildRect.width,
    duration: 1,
  }).set(el.lastChild, {
    // カーテン開き後、文字列を表示します
    opacity: 1,
  }).to(el.firstElementChild, {
    // カーテンを閉じます
    left: firstChildRect.width + firstChildRect.left,
    width: 0,
    duration: 1,
    // カーテン閉じ後、カーテン要素を削除します
    onComplete: () => el.removeChild(el.firstElementChild),
  });
};

<div v-animateDirective="{ background: 'red' }">
  ...
</div>

Vue.directive("animateDirective", {
  // ↓binding.valueに渡したパラメータがObjectで保管されています
  bind: (el, binding) => initShuffleLetter(el, binding.value),
  inserted: (el) => {
    let handleOnScroll = () => {
      // 画面内判定がtrueの際に実行
      if (isInScreen(el)) {
        console.log("ok");
        window.removeEventListener("scroll", handleOnScroll);
        animateShuffleLetter(el);
      }
    };
    window.addEventListener("scroll", handleOnScroll);
  },
});

// 画面上端を0、下端を1としてpointに値を引き渡します。
export const isThroughTriggerPoint = (el, point) => {
  // 指定されたy座標(point)を使ってトリガーポイント
  const triggerPoint = (point) => {
    if (!point) return window.innerHeight * 0.8;
    return window.innerHeight * point;
  };
  const { top: elementTop, bottom: elementBottom } = el.getBoundingClientRect();
  // 要素の上端がトリガーポイントを通過したか否か(boolean)を返す
  return triggerPoint < elementTop;
};