73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
|
const fragment = document.createDocumentFragment();
|
|
const grid = [17, 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()
|