<script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"
      integrity="sha512-gWlyRVDsJvp5kesJt4cSdPPLZIBdln/uSwzYgUicQcbTgRNQE4QhP5KUBIYlLYLkiKIQiuD7KUMHzqGNW/D2bQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/Flip.min.js"
      integrity="sha512-lsiYWqlZ8EmM82hsEpDR8dunTewuIl4gIFCFVQ4xhIS4gfw0/4iNUnpsmf74e0nFjL9ngzfaI8pVQVc14w7A0A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
<div class="insert"></div>
    <div class="container">
      <div class="item move relocate">
        <img src="https://images.unsplash.com/photo-1606054512716-fb198b6686c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="" />
      </div>
      <div class="item move">
        <img src="https://images.unsplash.com/photo-1602441594341-efec5ea6d8a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
      </div>
      <div class="item move relocate">
        <img src="https://images.unsplash.com/photo-1605478264999-8d1cd66e9c78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
      </div>
      <div class="item move">
        <img src="https://images.unsplash.com/photo-1570078356568-d2913fa302bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" />
      </div>
      <div class="item move relocate">
        <img src="https://images.unsplash.com/photo-1592688607559-fb7003a020e9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=683&q=80" alt="" />
      </div>
      <div class="item">
        <img src="https://images.unsplash.com/photo-1602503735220-0387c55350d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" />
      </div>
    </div>
body {
  background: #000000;
}

.container {
  max-width: 800px;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.item {
  width: 250px;
  height: 250px;
  padding: 10px;
}

.item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.insert {
  padding-top: 15rem;
  max-width: 800px;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

gsap.registerPlugin(Flip);
let insert = document.querySelector(".insert");
let relocate = document.querySelectorAll(".relocate");

items = gsap.utils.toArray(".move");

let state = Flip.getState(items);

  relocate.forEach((rel) => {
    insert.appendChild(rel);
  });
  Flip.from(state, {
    duration: 1,
    ease: "power1.inOut",
    repeat: -1,
    repeatDelay: 2
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.