Photos Staggering Animation using HTML CSS and JS (Anime.js)

Get ready to dazzle your audience with a mesmerizing display of staggered animations! In this tutorial, we’ll be combining the power of HTML, CSS, and the dynamic capabilities of Anime.js to create a breathtaking Staggering Animation effect for your photos. Join us as we unlock the secrets to captivating visual storytelling and breathe life into your images with seamless transitions and choreographed movements. Let’s embark on this creative journey together and elevate your web design to new heights!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen staggering animation with anime.js — week 18/52 by Mert Cukuren (@knyttneve) on CodePen.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Photos Staggering Animation using HTML CSS and JS (Anime.js) - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

h1 Please wait until the images are loaded.
div
  -for (i=0; i<25; i++)
    span
      img(src="https://picsum.photos/4"+i+"/4"+i)

CSS Code

Create a file style.css and paste the code below.

div {
  max-width: 450px;
  display: flex;
  flex-wrap: wrap;
  margin: 80px auto;
}

span {
  flex: 0 1 20%;
  cursor: pointer;
  font-size: 0;
  overflow: hidden;
}

img {
  width: 100%;
  pointer-events: none;
}

h1 {
  position: fixed;
  top: 0;
  font-size: 16px;
  background-color: #000;
  color: #fff;
  font-weight: normal;
  margin: 0;
  transform: translateX(-50%);
  left: 50%;
  line-height: 2;
  padding: 0 20px;
}

JavaScript Code

Create a file script.js and paste the code below.

const images = document.querySelectorAll("span");

images.forEach((image, index) => {
  image.addEventListener("click", e => {
    anime({
      targets: images,
      autoplay: true,
      opacity: [
        { value: .5, easing: "easeOutSine", duration: 600 },
        { value: 1, easing: "easeInOutQuad", duration: 900 }
      ],
      filter: [
        { value: "blur(5px) grayscale(100%)", easing: "easeOutSine", duration: 700 },
        { value: "blur(0px) grayscale(0%)", easing: "easeInOutQuad", duration: 1000 }
      ],
      borderRadius: [
        { value: "50%", easing: "easeOutSine", duration: 700 },
        { value: "0%", easing: "easeInOutQuad", duration: 1000 }
      ],
      scale: [
        { value: 0.5, easing: "easeOutSine", duration: 600 },
        { value: 1, easing: "easeInOutQuad", duration: 1100 }
      ],
      delay: anime.stagger(200, { grid: [5, 5], from: index })
    });
  });
});

window.onload = () => document.querySelector('h1').remove();
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("img").forEach(img => {
    img.onerror = function() {
      this.style.display = "none";
    };
  });
});