Layered animations with anime.js

index.html

<div class="animation-wrapper">
  <div class="layered-animations">
    <svg class="circle1 large shape" viewBox="0 0 96 96" style="transform:rotate(23deg)">
      <defs>
        <linearGradient id="circleGradient" x1="0%" x2="100%" y1="20%" y2="80%">
          <stop stop-color="#2c2c2c" offset="0%"/>
          <stop stop-color="#242423" offset="50%"/>
          <stop stop-color="#707070" offset="100%"/>
        </linearGradient>
      </defs>
      <circle cx="144" cy="48" r="40" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/>
    </svg>

    <svg class="circle2 large shape" viewBox="0 0 96 96" style="transform:rotate(23deg)">
      <circle cx="144" cy="48" r="15" fill-rule="evenodd" stroke-linecap="square" fill="#acb6f1"/>
    </svg>

    <svg class="circle3 large shape" viewBox="0 0 96 96" style="transform:rotate(23deg)">
      <circle cx="144" cy="48" r="6" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/>
    </svg>

    <svg class="large shape" viewBox="0 0 96 96" style="overflow:visible">
      <defs>
        <linearGradient id="triangleGradient1" x1="0%" x2="100%" y1="20%" y2="80%">
          <stop stop-color="#f94260" offset="0%"/>
          <stop stop-color="#f94260" offset="50%"/>
          <stop stop-color="#f94260" offset="100%"/>
        </linearGradient>
      </defs>
      <polygon fill-rule="evenodd" points="-11.8 -7.6 19.45 -7.6 -11.8 66.2" stroke-linecap="square" fill="url(#triangleGradient1)"/>
    </svg>
    
  </div>
</div>

layered-animations-with-anime-js.markdown

Layered animations with anime.js

An animation that demonstrate how to make layered animations with anime.js. Made for https://animejs.com.

A Pen by Alan Pachuau on CodePen.

License.

script.js

var layeredAnimation = (function() {

  var easings = ["spring"];

  function createKeyframes(value) {
    var keyframes = [];
    for (var i = 0; i < 30; i++) keyframes.push({ value: value });
    return keyframes;
  }

  var timeline = anime
    .timeline({
      duration: function () {
        return 3200;
      },
      easing: function () {
        return easings[anime.random(0, easings.length - 1)];
      },
    });
    
    timeline
      .add(
        {
          targets: ".triangle polygon",
          // translateX: createKeyframes(function (el) {
          //   return 0;
          //   // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520);
          // }),
          translateY: createKeyframes(function (el) {
            return 0;
          }),
          // rotate: createKeyframes(function() { return anime.random(-180, 180); }),
        },
        300
      )
      .add(
        {
          targets: ".circle1 circle",
          translateX: createKeyframes(function (el) {
            return -144;
            // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520);
          }),
          translateY: createKeyframes(function (el) {
            return 0;
          }),
          // rotate: createKeyframes(function() { return anime.random(-180, 180); }),
        },
        600
      )
      .add(
        {
          targets: ".circle2 circle",
          translateX: createKeyframes(function (el) {
            return -144;
            // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520);
          }),
          translateY: createKeyframes(function (el) {
            return 0;
          }),
          // rotate: createKeyframes(function() { return anime.random(-180, 180); }),
        }, 700
      )
      .add(
        {
          targets: ".circle3 circle",
          translateX: createKeyframes(function (el) {
            return -144;
            // return el.classList.contains('large') ? anime.random(-300, 300) : anime.random(-520, 520);
          }),
          translateY: createKeyframes(function (el) {
            return 0;
          }),
          // rotate: createKeyframes(function() { return anime.random(-180, 180); }),
        }, 800
      );

})();

scripts

<script src="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5"></script>

style.css

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

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

/** Layered Animation **/

.layered-animations {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1100px;
  height: 550px;
  margin: -275px 0 0 -550px;
}

.layered-animations .shape {
  position: absolute;
  top: 50%;
  /* overflow: visible; */
  width: 280px;
  height: 280px;
  margin-top: -140px;
  stroke: transparent;
  stroke-width: 1px;
  fill: url(#shapesGradient);
}

@media (min-width: 740px) {
  .layered-animations .shape {
    stroke-width: .5px;
  }
}

/* .layered-animations .small.shape {
  width: 64px;
  height: 64px;
  margin-top: -32px;
  stroke: currentColor;
  fill: currentColor;
}

.layered-animations .x-small.shape {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  stroke: currentColor;
  fill: currentColor;
} */

styles

<link href="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5" rel="stylesheet" />