<div class="stars">
  <i class="fa fa-star star"></i>
  <i class="fa fa-star star"></i>
  <i class="fa fa-star star"></i>
  <i class="fa fa-star star"></i>
  <i class="fa fa-star star"></i>
</div>

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: #5c5c5c;
}

.stars {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 50px;
  color: #ffe027;
  filter: drop-shadow(0 0 6px #0000001f);
}

.star {
  
}

function preloadAnimtionStars() {
  let container = gsap.utils.selector(".stars");
  let stars = container(".star");
  // gsap.to(q('img'), { x: 100 });

  var staggerTimeline = new TimelineLite();
  staggerTimeline
    .staggerFrom(
      stars,
      0.5,
      { rotation: "-20deg", opacity: 0, ease: Back.easeOut },
      0.2
    )
    .staggerTo(
      stars,
      0.5,
      { opacity: 0, rotation: "45deg", ease: Back.easeOut },
      0.2
    )
    .repeat(-1);
  // return staggerTimeline;
}

preloadAnimtionStars();