const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
const fragment = document.createDocumentFragment();
const grid = [12, 6];
const col = grid[0];
const row = grid[1];
const numberOfElements = col * row;

for (let i = 0; i < numberOfElements; i++) {
    let div = document.createElement('div');
    div.className = 'part';
    fragment.appendChild(div);
}

staggerVisualizerEl.appendChild(fragment);

const staggersAnimation = anime.createTimeline({
    easing: 'easeInOutSine',
    delay: anime.stagger(50),
    loop: true,
    autoplay: false
});

staggersAnimation
    .add('.part', {
        x: anime.stagger('-.1rem', { grid: grid, from: 'center', axis: 'x' }),
        y: anime.stagger('-.1rem', { grid: grid, from: 'center', axis: 'y' }),
        duration: 200,
        scale: .5,
        esae: 'outQuad',
        delay: anime.stagger(200, { grid: grid, from: 'center' })
    })
    .add('.part', {
        x: anime.stagger('.2rem', { grid: grid, from: 'center', axis: 'x' }),
        y: anime.stagger('.2rem', { grid: grid, from: 'center', axis: 'y' }),
        duration: 300,
        ease: anime.createSpring(),
        delay: anime.stagger(250, { grid: grid, from: 'center' })
    })
    .add('.part', {
        translateX: () => anime.utils.random(-8, 8),
        translateY: () => anime.utils.random(-1, 1, 2),
        delay: anime.stagger(50, { from: 'last' })
    })
    .add('.part', {
        translateX: anime.stagger('.25rem', { grid: grid, from: 'center', axis: 'x' }),
        translateY: anime.stagger('.25rem', { grid: grid, from: 'center', axis: 'y' }),
        rotate: 0,
        scaleX: 2.5,
        scaleY: .25,
        delay: anime.stagger(100, { from: 'center' })
    })
    .add('.part', {
        rotate: anime.stagger([90, 0], { grid: grid, from: 'center' }),
        delay: anime.stagger(200, { grid: grid, from: 'center' })
    })
    .add('.part', {
        translateX: 0,
        translateY: 0,
        scale: .5,
        scaleX: 1,
        rotate: 180,
        duration: 1000,
        delay: anime.stagger(500, { grid: grid, from: 'center' })
    })
    .add('.part', {
        scaleX: 1,
        scaleY: 1,
        scale: 1,
        delay: anime.stagger(150, { grid: grid, from: 'center' })
    });

staggersAnimation.play()