CloneCSS-GSAP PIXI JS Blend Mode Circles Intro

index.html

<div class="container"></div>

playground.json

{
  "scripts": [
    "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.0/pixi.min.js",
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PixiPlugin3.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"
  ],
  "styles": []
}

script.js

console.clear();

gsap.registerPlugin(PixiPlugin);

const container = document.querySelector(".container");
const app = new PIXI.Application({
  width: 716,
  height: 724,
  backgroundColor: 0xdae0d2,
  anitalias: true
});
const gridSize = 11;
const numContainers = gridSize * gridSize;
const circD = 63; // circle diameter
const circOffsetX = 0.11111; // circle2/3 x offset
const circOffsetY = 0.15873; // circle2/3 y offset
const color1 = 0x01aff6; // blue
const color2 = 0xf20085; // pink
const color3 = 0xffd036; // yellow
const animDuration = 0.8;

const init = () => {
  container.appendChild(app.view);
  app.ticker.stop();
  gsap.ticker.add(() => {
    app.ticker.update();
  });

  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      const container = new PIXI.Container();
      const circContainer1 = new PIXI.Container();
      const circContainer2 = new PIXI.Container();
      const circContainer3 = new PIXI.Container();

      const circle1 = new PIXI.Graphics();
      circle1.beginFill(color1, 1);
      circle1.drawCircle(0, 0, circD / 2);
      circle1.endFill();
      circle1.blendMode = PIXI.BLEND_MODES.MULTIPLY;
      circle1.lineStyle(0);
      circContainer1.addChild(circle1);
      circContainer1.x = 0;
      circContainer1.y = 0;
      container.addChild(circContainer1);

      const circle2 = new PIXI.Graphics();
      circle2.beginFill(color2, 1);
      circle2.drawCircle(0, 0, circD / 2);
      circle2.endFill();
      circle2.blendMode = PIXI.BLEND_MODES.MULTIPLY;
      circle2.lineStyle(0);
      circContainer2.addChild(circle2);
      circContainer2.x = -circOffsetX * circD;
      circContainer2.y = circOffsetY * circD;
      container.addChild(circContainer2);

      const circle3 = new PIXI.Graphics();
      circle3.beginFill(color3, 1);
      circle3.drawCircle(0, 0, circD / 2);
      circle3.endFill();
      circle3.blendMode = PIXI.BLEND_MODES.MULTIPLY;
      circle3.lineStyle(0);
      circContainer3.addChild(circle3);
      circContainer3.x = circOffsetX * circD;
      circContainer3.y = circOffsetY * circD;
      container.addChild(circContainer3);

      app.stage.addChild(container);
      container.x = i * circD + circD / 2 + i * 2;
      container.y = j * circD + circD / 2 + j * 2;
    }
  }
  app.stage.x = 2;
};

const resize = () => {
  const vh = window.innerHeight;
  const ch = container.offsetHeight;
  let scaleFactor = vh / ch;
  if (scaleFactor < 1) {
    gsap.set(container, { scale: scaleFactor });
  } else {
    gsap.set(container, { scale: 1 });
  }
};

const animate = () => {
  const tl = gsap.timeline({ delay: 0.2 });

  tl.from(app.stage.children, {
    pixi: { scale: 0, rotation: 360 },
    duration: 2,
    ease: "power4",
    stagger: {
      each: 0.1,
      grid: [gridSize, gridSize],
      from: [0, 1]
    }
  });

  tl.to(
    app.stage.children,
    {
      duration: animDuration,
      ease: "sine.inOut",
      stagger: {
        each: 0.1,
        grid: [gridSize, gridSize],
        from: [0, 1],
        repeat: -1,
        yoyo: true,
        onStart: function() {
          gsap.to(this.targets()[0].children, {
            pixi: { scale: 0.15 },
            duration: animDuration,
            ease: "sine.inOut",
            repeat: -1,
            yoyo: true
          });
        }
      }
    },
    0.1
  );
};

init();
resize();
animate();

style.css

html {
  box-sizing: border-box;
}

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

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #001823;
}

.container {
  display: flex;
  flex-direction: column;
  width: 716px;
  height: 1008px;
  background: #dae0d2;
}

canvas {
  opacity: 0.9;
}