gsap

const tl = gsap.timeline();
tl.from(".js_1_h2 span", 0.8, {
  delay: 1,
  webkitTextStroke: "1px blue",
  opacity: 0,
  scale: 1.5,
  stagger: {
    amount: 0.1,
    from: "center",
  },
  ease: "power2.out",
})
  .to(".js_1_h2 span", 1, {
    webkitTextStroke: "0px black",
  })
  .from(".js_1-2_p", 0.5, {
    opacity: 0,
    y: 10,
  })
  .from(
    ".js_1-3_btn",
    0.5,
    {
      y: -10,
      opacity: 0,
    },
    "<"
  )
  .from(".cover-slide", 0.5, {
    opacity: 0,
    x: "-100%",
  })
  .to(".cover-slide", 0.5, {
    x: "100%",
  })
  .from(
    ".js_1-4_img img",
    0.8,
    {
      opacity: 0,
      scale: 1.3,
    },
    "<"
  );

使い方
const tl(変数名は何でもよい) = gsap.timeline()
こののように宣言し、to/fromメソッドでつなげることができ、アニメーションは順番に実装されます。
サンプルコードの値を変更し、実際に試してみてください。

.from(
    ".js_1-3_btn",
    0.5,
    {
      y: -10,
      opacity: 0,
    },
    "<"
  )

「<」（小なり記号）は、上述の内容と同じタイミングでアニメーションさせることを意味します。アニメーションが単調にならないように、タイミングをコントロールすることができます。

cover-slideクラス

.cover-slide {
  top: 0;
  left: 0;
  background-color: #858181;
  width: 100%;
  height: 100%;
  z-index: 1;
}

CSSで、予め画像の上部にグレーの色を準備し、absoluteとz-indexを使用して調整します。

.from(".cover-slide", 0.5, {
    opacity: 0,
    x: "-100%",
  })
  .to(".cover-slide", 0.5, {
    x: "100%",
  })

Gsapのxプロパティを使用して、要素を-100%から100%まで移動させるカバーアニメーションを実装しています。また、このアニメーションを正しく表示するためには、親要素にoverflow: hiddenを指定することが重要です。