Нужна помощь в анимации страницы GSAP

const img1 = document.getElementsByClassName("img_1")
// // const img2 = document.getElementsByClassName("img_2")
// // const img3 = document.getElementsByClassName("img_3")
const h1 = document.querySelector("h1")

const tl = gsap.timeline()

tl.from(h1, 2, {scale: 1.2, opacity: 0})



//tl.to(h1, 2, {scale: 1, opacity: 1})
//tl.to(h1, 2, {rotate: .5}, "-=2")
//tl.to(h1, 2, {rotate: 1}, "-=4")

// tl.to(img1, 4, {rotate: -30})

// tl.to(img1, 4, {right: 150, top: 280, rotate: 30}, "-=2")

// tl.to(img1, 4, {right: 383, top: 300, rotate: 30}, "-=2")
// // tl.to(img1, 4, {right: 383, top: 254, rotate: 30})
// // tl.to(img1, 4, {right: 383, top: 254, rotate: 30})
// // tl.to(img1, 4, {right: 383, top: 254, rotate: 30})

//new AnimPanel(tl)

* {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Amiri";
  font-size: 60px;
}

h2 {
  font-family: 'Amiri';
  font-size: 28px;
  margin-top: .2em;
  line-height: 1.5em;
}

#heading_wrapper {
  padding: 6em;
  margin-bottom: 2em;
}

#second_part_blue {
  color: #3874C1;
}

.line_img {
  position: absolute;
  right: 0;
  top: 0;
}

.img_1,
.img_2,
.img_3 {
  width: 25%;
}

.img_1 {
  position: absolute;
  right: 370px;
  top: 120px;
  transform: rotate(197deg);
  offset-path: path("M826.546 0.312012C826.546 0.312012 759.218 205.496 601.735 301.706C444.252 397.916 347.132 376.282 196.614 385.153C125.72 389.331 77.914 378.934 46.889 366.653C40.946 364.3 30.536 364.353 27.07 358.461C24.749 354.513 30.019 343.71 23.37 340.769C16.721 337.828 0.477966 346.698 0.477966 346.698");
  animation: move 5s ease-out forwards;
}

.img_2 {
  position: absolute;
  right: 70px;
  top: 71px;
  transform: rotate(197deg);
  offset-path: path("M826.546 0.312012C826.546 0.312012 759.218 205.496 601.735 301.706C444.252 397.916 347.132 376.282 196.614 385.153C125.72 389.331 77.914 378.934 46.889 366.653C40.946 364.3 30.536 364.353 27.07 358.461C24.749 354.513 30.019 343.71 23.37 340.769C16.721 337.828 0.477966 346.698 0.477966 346.698");
  animation: move 5s ease-out forwards;
}

.img_3 {
  position: absolute;
  right: -190px;
  top: -73px;
  transform: rotate(197deg);
  offset-path: path("M826.546 0.312012C826.546 0.312012 759.218 205.496 601.735 301.706C444.252 397.916 347.132 376.282 196.614 385.153C125.72 389.331 77.914 378.934 46.889 366.653C40.946 364.3 30.536 364.353 27.07 358.461C24.749 354.513 30.019 343.71 23.37 340.769C16.721 337.828 0.477966 346.698 0.477966 346.698");
  animation: move 5s ease-out forwards;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    transform: rotate(186deg);
    offset-distance: 80%;
  }
}

#img_1_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#circle {
  position: absolute;
  top: 400px;
  left: -80px;
  width: 600px;
  height: 600px;
  background-color: #91a7c448;
  border-radius: 50%;
}

#rectangle {
  position: absolute;
  width: 349px;
  height: 118px;
  right: 1400px;
  bottom: 31%;
  border-radius: 10px;
  background: #ffffff;
  z-index: 999999;
  -webkit-box-shadow: 10px 10px 14px 0px rgba(65, 113, 150, 0.6);
  -moz-box-shadow: 10px 10px 14px 0px rgba(65, 113, 150, 0.6);
  box-shadow: 10px 10px 14px 0px rgba(65, 113, 150, 0.6);
}

.buchung {
  padding: 10px;
}

.btn {
  position: absolute;
  position: absolute;
  width: 269px;
  height: 58px;
  right: 1470px;
  top: 672px;
  border-radius: 10px;
  background-color: #3874C1;
}

.pfeil {
  position: absolute;
  right: 30px;
}

.circle_2 {
  position: absolute;
  bottom: -10px;
  left: 385px;
}

.schleife {
  position: absolute;
  top: -23px;
  right: 140px;
}

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

<div id="heading_wrapper">
  <h1><span id="second_part_blue">Fotosession </span>buchen</h1>
  <h2>Buchen Sie jetzt Ihr <br> persönliches Fotoshooting</h2>
</div>

<img class="line_img" src="./images/line_for_images.svg">

<img class="img_1" src="./images/img_1.png">

<img class="img_2" src="./images/img_2.png">
<img class="img_3" src="./images/img_3.png">

<div id="circle"></div>
<div id="rectangle">
  <br>
  <img class="schleife" src="./images/schleife.png">
  <p class="buchung">
    Lorem ipsum dolor sit amet, consetetur sadipscing. magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing.
  </p>
</div>
<form action="./seite_2.html">
  <p><button class="btn">MEHR ERFAHREN <img class="pfeil" src="./images/pfeil.svg"></button></p>
</form>
<div class="circle_2">
  <img src="./images/circle_2.png">
</div>