How to use the animejs.stagger function in animejs

anime.timeline().add({
	targets: [],
	duration: 1000,
	easing: "linear",
}, 0);

anime({
	targets: ".mizi",
	keyframes: [
    {translateY: -40, delay: 123},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0},
		{translateY: 0}
	],
	delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
	endDelay: -1.12742e-12,
	loop: true,
	easing: (el, i, total) => {
		return (t) => {
			return Math.pow(Math.sin(t * (i + 1)), total);
		};
	},
	loopBegin: () => {
		console.log("Hello, MMM");
	},
	changeComplete: () => {
		console.log("It surely had been read.");
	}
});
anime.set(
	".test-div",

const onExit = el => {
  return anime({
    targets: [
      ...el.querySelectorAll("[data-fade-in]"),
      ...el.querySelectorAll("[data-icon-nonsample]")
    ],
    opacity: 0,
    easing: "easeOutSine",
    duration: 350,
    delay: anime.stagger(20)
  }).finished
}

const duration = 1000
        const targets = refs.map(({ current }) => current)

        const shineDuration = 700
        const offset = 200

        const tl = anime.timeline({
            easing: 'easeOutQuad',
            duration,
            loop: true,
        })

        tl.add({
            targets,
            translateY: endY,
            delay: anime.stagger(100)
        })

        tl.add({
            targets,
            translateY: startY,
            delay: anime.stagger(100)
        })

        const tl2 = anime.timeline({
            easing: 'easeOutQuad',
            duration: shineDuration,
            endDelay: offset + duration - shineDuration,
            loop: true,
            delay: 0,
        })

const animateGridOut = gridContainer =>
  anime
    .timeline()
    .add({
      targets: gridContainer.querySelectorAll('.card'),
      easing,
      opacity: createOpacityAnimationConfig(false),
      translateY: -30,
      delay: anime.stagger(50)
    })
    .add(
      {
        targets: gridContainer,
        translateX: 1000,
        opacity: createOpacityAnimationConfig(false),
        easing,
        complete: () => triggerAnimationDoneEvent(gridContainer)
      },
      '-=1400'
    )

handleStart({ el, id }) {
      const squares = el.querySelectorAll(".opacity-grid-square");
      anime({
        targets: squares,
        opacity: [0, 1],
        delay: anime.stagger(40, { easing: "easeINQuad" })
      });
    }
  }

useEffect(() => {
    const logoAnimationTL = anime
      .timeline({
        autoplay: false,
        easing: 'easeOutSine'
      })
      .add(
        {
          targets: 'path',
          strokeDashoffset: [anime.setDashoffset, 0],
          duration: 500,
          direction: 'alternate',
          delay: anime.stagger(60, { from: 'center' })
        },
        0
      );

    logoAnimationTL.play();
  }, []);

createTimeline() {
    const timeline = anime.timeline({ duration: DURATION, autoplay: false, loop: true });

    const fadeInRings = {
      targets: this.rings,
      opacity: [0, 1],
      delay: anime.stagger(DURATION / 5, { from: 'last' }),
      duration: DURATION / 2,
      easing: 'linear'
    }

    const quakeCircles = {
      targets: this.circles,
      scale: el => this.circlesMap.get(el).ringNumber === 0 ? 3 : 1.5,
      translateY: circle => this.getTranslation(circle, 4).y,
      translateX: circle => this.getTranslation(circle, 4).x,
      delay: (el, i) => (
        Math.pow(this.circlesMap.get(el).ringNumber, 0.6) *
        DURATION / 4 +
        (this.circlesMap.get(el).ringNumber > 0 ? DURATION / 2.5 : 0)
      ),
      duration: DURATION,
      easing: () => t => Math.sin(t * Math.PI),

const animateGridIn = gridContainer =>
  anime
    .timeline()
    .add({
      targets: gridContainer,
      translateX: [-1000, 0],
      opacity: createOpacityAnimationConfig(true),
      easing
    })
    .add(
      {
        targets: gridContainer.querySelectorAll('.card'),
        easing,
        opacity: createOpacityAnimationConfig(true),
        translateY: [-30, 0],
        delay: anime.stagger(70)
      },
      '-=500'
    )

handleComplete({ el, id }) {
      this.loaded = true;
      const nonFlippable = el.querySelectorAll(".icon:not(.flipped)");

      anime({
        targets: nonFlippable,
        opacity: [0, 1],
        duration: 3000,
        delay: anime.stagger(50)
      });
    },
    handleHeaderEnter(el, done) {