Vueのアニメーションはカスタムディレクティブで管理しよう

// Vueオブジェクトをインポート
import Vue from "vue";

// 第一引数にディレクティブ名を入れます(v-xxxxのxxxx部分)
// 今回の場合はv-scrollとなります
Vue.directive("scroll", {
  inserted: () => {
    const handleOnScroll = () => console.log(window.scrollY);
    window.addEventListener("scroll", function);
  }
});

<template>
    <div v-scroll></div>
</template>

Vue.directive("scroll", {
  // 第１引数: elでHTML要素を取得
  inserted: (el) => {
    let handleOnScroll = () => {
      const positionTop = el.getBoundingClientRect().top;
      console.log(positionTop);
    };
    window.addEventListener("scroll", function);
  }
});

画面下端 < HTML要素の下端 && HTML要素の上端 < 画面上端

Vue.directive("scroll", {
  inserted: (el) => {
    let handleOnScroll = () => {
      // 画面内判定がtrueの際に実行
      if (isInScreen(el)) {
        console.log("画面の中にいるよ〜〜");
        window.removeEventListener("scroll", handleOnScroll);
      }
    };
    window.addEventListener("scroll", handleOnScroll);
  },
});
// 画面内判定処理の切り出し
const isInScreen = (el) => {
  const { top: elementTop, bottom: elementBottom } = el.getBoundingClientRect();
  // 画面下端 < HTML要素の下端 && HTML要素の上端 < 画面上端
  return (window.screenTop < elementTop && elementBottom < window.innerHeight);
};

import Vue from "vue";
import gsap from "gsap";

Vue.directive("animateFadeIn", {
  // 
  bind: (el) => gsap.set(el, {
    opacity: 0,
  }),
  inserted: (el) => {
    let handleOnScroll = () => {
      // 画面内判定がtrueの際に実行
      if (isInScreen(el)) {
        window.removeEventListener("scroll", handleOnScroll);
	//アニメーション関数にHTML要素を引渡し
        animateFadeIn(el);
      }
    };
    window.addEventListener("scroll", handleOnScroll);
  },
});

const isInScreen = (el) => {
  const { top: elementTop, bottom: elementBottom } = el.getBoundingClientRect();
  return window.screenTop < elementTop && elementBottom < window.innerHeight);
};

// 1秒間で透明度を1にフェードイン
const animateFadeIn = (el) => gsap.to(el, 1, {
  opacity: 1,
});