Javascript CSS使用JS、anime JS或GSAP转换动画

尝试使用animeJs或GSAP或纯Js在JavaScript中重新创建下面的设计，我的思维过程是使用sass，除此之外，我想不出任何东西，请帮助

    <div id='container'>
      <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt='view' id="img1" class="images" />
      <img src="https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=6&m=1072093690&s=612x612&w=0&h=Eyk67XBt4sr3Bk1MubM6dHpvEVNICX4L7FumWhcTwuY=" alt='powder' id="img2" class="images" />
      <img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt='powder' id="img3" class="images" />
      <img src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt='bird' id="img4" class="images" />
    </div>
#container {
  .images {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);

    @for $i from 1 through 4 {
      $rotation: random(40) - 20deg;

      &:nth-child(#{$i}) {
        transform: translate(-50%, -50%) rotate($rotation);
        z-index: -1 * $i; //reverses indexes
        animation: fly#{$i} 4s linear #{1s * $i};
      }

      @keyframes fly#{$i} {
        0% {
          transform: translate(-50%, -50%) rotate($rotation);
        }
        50% {
          transform: translate(800%, -50%) rotate($rotation);
        }
        100% {
          transform: translate(800%, -50%) rotate($rotation);
        }
      }
    }
  }
}

#容器{
.图像{
位置：绝对位置；
最高：50%；
左：50%；
宽度：300px；
高度：300px；
转换：翻译（-50%，-50%）；
@从1到4的$i{
$旋转：随机（40-20度）；
&：第n个孩子（#{$i}）{
变换：平移（-50%，-50%）旋转（$rotation）；
z-index:-1*$i；//反转索引
动画：fly#{$i}4s线性#{1s*$i}；
}
@关键帧飞行#{$i}{
0% {
变换：平移（-50%，-50%）旋转（$rotation）；
}
50% {
变换：平移（800%，-50%）旋转（$rotation）；
}
100% {
变换：平移（800%，-50%）旋转（$rotation）；
}
}
}
}
}