.container
  ul
    - for (var i = 0; i < 10; i++)
      li.raptor
        img(src='http://s3-ap-northeast-1.amazonaws.com/nishinoshake/demo/animals/raptor.png')

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.container {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
}
.raptor {
  width: 160px;
  height: auto;
  display: block;
  transform: translateX(-150%);
}
.raptor + .raptor {
  margin-top: 30px;
}
.raptor img {
  width: 100%;
  height: auto;
}

import gsap from 'https://cdn.skypack.dev/gsap@3.9.0'

const raptors = document.querySelectorAll('.raptor')
const stagger = 0.08

gsap
  .timeline({
    repeat: -1
  })
  .fromTo(raptors, {
    x: '-150%',
  }, {
    x: '150%',
    duration: 1,
    stagger,
    ease: 'power4.out'
  })
  .to(raptors, {
    rotateY: 180,
    duration: 0.5,
    ease: 'expo.out'
  })
  .to(raptors, {
    x: '-150%',
    duration: 1,
    stagger,
    ease: 'power4.out'
  })
  .to(raptors, {
    rotateY: 0,
    duration: 0.5,
    ease: 'expo.out'
  })