CloneCSS-GSAP Back Ease Circles

index.html

<svg class="animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 716 1008">
  <g fill="none" fill-rule="evenodd">
    <rect width="716" height="1008" fill="#A5B229" />
    <g class="circles" fill="#8DC0AF" transform="translate(0 292)">
      <circle cx="358" cy="358" r="358" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="304" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="258" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="220" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="187" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="159" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="135" style="mix-blend-mode:multiply" />
      <circle cx="358" cy="358" r="116" style="mix-blend-mode:multiply" />
    </g>
  </g>
</svg>

<h1>Click to restart</h1>

playground.json

{
  "scripts": [
    "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"
  ],
  "styles": []
}

script.js

console.clear();

const $ = document.querySelector.bind(document);

const animation = $(".animation");
let master = gsap.timeline({ delay: 0.5 });

animation.style.cursor = "pointer";

function animationCircles() {
  let tl = gsap.timeline();

  tl.from(".circles circle", {
    y: 800,
    ease: "expo",
    duration: 4,
    stagger: {
      each: -0.15
    }
  }).from(
    ".circles circle",
    {
      scale: 0.85,
      ease: "back(4)",
      duration: 0.5,
      transformOrigin: "center center",
      stagger: {
        each: -0.06,
        repeat: -1,
        yoyo: true
      }
    },
    1
  );

  return tl;
}

function init() {
  master.add(animationCircles());
  animation.onclick = () => {
    master.restart();
  };
}

window.onload = () => {
  init();
};

style.css

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body,
svg {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #001823;
  display: grid;
  place-items: center;
}

h1 {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}