GSAP Hero Section Scroll Experience

<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
 gsap.registerPlugin(ScrollTrigger);
 gsap
  .timeline({
    scrollTrigger: {
      trigger: ".transition",
      pin: true,
      start: "top top",
      end: "+=100%",
      scrub: 1,
    },
    defaults: {
      ease: "none",
    },
  })
  .to(
    document.body,
    {
      delay: 0.2,
      backgroundColor: "#000",
    },
    "start"
  )
  .to(
    ".upper-container h1",
    {
      scale: 5,
    },
    "start"
  )
  .to(
    ".upper-container h1",
    {
      opacity: 0,
    },
    "start"
  )
  .to(
    ".lower-container",
    {
      delay: 0.1,
    },
    "start"
  )
  .to(
    ".lower-container",
    {
      delay: 0,
      opacity: 1,
    },
    "start"
  );
</script>