Stacks

index.html

<div class="vh-100 flex justify-center items-center">
  <svg class="db w-100 mw7"
    viewBox="0 0 640 640"
    fill="white"
    stroke="#333333"
    stroke-width="8">
    <rect width="256"
      height="256"
      x="264"
      y="264" />
    <rect width="256"
      height="256"
      x="240"
      y="240" />
    <rect width="256"
      height="256"
      x="216"
      y="216" />
    <rect width="256"
      height="256"
      x="192"
      y="192" />
    <circle opacity="0"
      cx="320"
      cy="320"
      r="128" />
    <circle opacity="0"
      cx="320"
      cy="320"
      r="128" />
    <circle opacity="0"
      cx="320"
      cy="320"
      r="128" />
    <circle opacity="0"
      cx="320"
      cy="320"
      r="128" />
  </svg>

</div>

script.babel

const myTimeline = anime.timeline({
  loop: true,
});

const n = 32;

myTimeline
  .add({
    offset: 1000,
    targets: 'rect',
    translateX: `-=${n / 2}`,
    translateY: `-=${n / 2}`,
    easing: 'easeOutExpo',
  })
  .add({
    targets: 'rect',
    translateX: 0,
    translateY: 0,
    x: (_, idx) => [192, [264, 240, 216, 192][idx]],
    y: (_, idx) => [192, [264, 240, 216, 192][idx]],
    easing: 'easeOutElastic',
    duration: 800,
  })
  .add({
    targets: 'rect',
    offset: '+=800',
    x: 192,
    y: 192,
    easing: 'easeInQuint',
    duration: 800,
  })
  .add([
    {
      targets: 'body',
      backgroundColor: ['#fff', '#473BE7'],
      duration: 1,
    },
    {
      targets: 'svg',
      stroke: ['#333', '#fff'],
      fill: ['#fff', '#473BE7'],
      duration: 1,
    },
  ])
  .add({
    targets: 'rect',
    easing: 'easeOutExpo',
    rx: 128,
    ry: 128,
    duration: 400,
  })
  .add([
    {
      targets: 'circle',
      opacity: 1,
      duration: 1,
    },
    {
      targets: 'rect',
      opacity: 0,
      duration: 1,
    },
  ])
  .add({
    targets: 'circle',
    r: '-=64',
    easing: 'easeOutExpo',
  })
  .add({
    targets: 'circle',
    r: (_, idx) => 128 - idx * 32 + 64,
    easing: 'easeOutElastic',
    duration: 800,
  })
  .add({
    targets: 'circle',
    r: 128,
    easing: 'easeInQuint',
    duration: 800,
    opacity: { value: 0, duration: 1, delay: 799 },
  })
  .add([
    {
      targets: 'body',
      backgroundColor: ['#473BE7', '#fff'],
      duration: 1,
    },
    {
      targets: 'svg',
      stroke: ['#fff', '#333'],
      fill: ['#473BE7', '#fff'],
      duration: 1,
    },
  ])
  .add({
    targets: 'rect',
    opacity: { value: 1, duration: 1 },
    rx: 0,
    ry: 0,
    easing: 'easeOutQuint',
    duration: 200,
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

stacks.markdown

Stacks

A Pen by Varun Vachhar on CodePen.

License.

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.1/tachyons.css" rel="stylesheet" />