Staggering Animation using HTML, CSS, JS and Reset CSS

This Staggering Animation is developed using HTML, CSS, JS, and Reset CSS. Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings.

Reset CSS Website

You can see the full code of this animation. And there is a video tutorial also.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Staggering Animation - DevXmart</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    />
    <link
      rel="stylesheet"
      href="https://codepen.io/juliangarnier/pen/REyzrR/75efae7724dbc3c055e918057fc4aca5.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="animation-wrapper">
      <div class="stagger-visualizer">
        <div class="cursor color-red"></div>
        <div class="dots-wrapper"></div>
      </div>
    </div>
    <script src="https://codepen.io/juliangarnier/pen/REyzrR/75efae7724dbc3c055e918057fc4aca5.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

CSS Code

html,
body {
  background-color: #292929;
  color: #252423;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
}

.animation-wrapper {
  width: 80%;
  padding-bottom: 40%;
}

.stagger-visualizer {
  position: absolute;
  width: 1100px;
  height: 550px;
  transform-origin: left top;
}

.stagger-visualizer .dots-wrapper {
  transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.stagger-visualizer .dot {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  margin: 16px;
  background-color: currentColor;
  border-radius: 50%;
}

@media (min-width: 740px) {
  .stagger-visualizer .dot {
    background-color: transparent;
    background-image: linear-gradient(180deg, #FFFFFF 8%, #D3CDC6 100%);
  }
}

.stagger-visualizer .cursor {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 37px;
  height: 37px;
  margin: 9px;
  background-color: currentColor;
  border-radius: 50%;
}

JavaScript Code

function fitElementToParent(el, padding) {
  var timeout = null;
  function resize() {
    if (timeout) clearTimeout(timeout);
    anime.set(el, {scale: 1});
    var pad = padding || 0;
    var parentEl = el.parentNode;
    var elOffsetWidth = el.offsetWidth - pad;
    var parentOffsetWidth = parentEl.offsetWidth;
    var ratio = parentOffsetWidth / elOffsetWidth;
    timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
  }
  resize();
  window.addEventListener('resize', resize);
}

var advancedStaggeringAnimation = (function() {

  var staggerVisualizerEl = document.querySelector('.stagger-visualizer');
  var dotsWrapperEl = staggerVisualizerEl.querySelector('.dots-wrapper');
  var dotsFragment = document.createDocumentFragment();
  var grid = [20, 10];
  var cell = 55;
  var numberOfElements = grid[0] * grid[1];
  var animation;
  var paused = true;
  
  fitElementToParent(staggerVisualizerEl, 0);

  for (var i = 0; i < numberOfElements; i++) {
    var dotEl = document.createElement('div');
    dotEl.classList.add('dot');
    dotsFragment.appendChild(dotEl);
  }

  dotsWrapperEl.appendChild(dotsFragment);

  var index = anime.random(0, numberOfElements-1);
  var nextIndex = 0;

  anime.set('.stagger-visualizer .cursor', {
    translateX: anime.stagger(-cell, {grid: grid, from: index, axis: 'x'}),
    translateY: anime.stagger(-cell, {grid: grid, from: index, axis: 'y'}),
    translateZ: 0,
    scale: 1.5,
  });

  function play() {

    paused = false;
    if (animation) animation.pause();

    nextIndex = anime.random(0, numberOfElements-1);

    animation = anime.timeline({
      easing: 'easeInOutQuad',
      complete: play
    })
    .add({
      targets: '.stagger-visualizer .cursor',
      keyframes: [
        { scale: .75, duration: 120}, 
        { scale: 2.5, duration: 220},
        { scale: 1.5, duration: 450},
      ],
      duration: 300
    })
    .add({
      targets: '.stagger-visualizer .dot',
      keyframes: [
        {
          translateX: anime.stagger('-2px', {grid: grid, from: index, axis: 'x'}),
          translateY: anime.stagger('-2px', {grid: grid, from: index, axis: 'y'}),
          duration: 100
        }, {
          translateX: anime.stagger('4px', {grid: grid, from: index, axis: 'x'}),
          translateY: anime.stagger('4px', {grid: grid, from: index, axis: 'y'}),
          scale: anime.stagger([2.6, 1], {grid: grid, from: index}),
          duration: 225
        }, {
          translateX: 0,
          translateY: 0,
          scale: 1,
          duration: 1200,
        }
      ],
      delay: anime.stagger(80, {grid: grid, from: index})
    }, 30)
    .add({
      targets: '.stagger-visualizer .cursor',
      translateX: { value: anime.stagger(-cell, {grid: grid, from: nextIndex, axis: 'x'}) },
      translateY: { value: anime.stagger(-cell, {grid: grid, from: nextIndex, axis: 'y'}) },
      scale: 1.5,
      easing: 'cubicBezier(.075, .2, .165, 1)'
    }, '-=800')

    index = nextIndex;

  }

  play();

})();

Staggering Animation using HTML, CSS, JS and Reset CSS

HTML Code

CSS Code

JavaScript Code

Video Tutorial

Contact Form