Animation Perf Test

animation-perf-test.markdown

Animation Perf Test

A Pen by Pavel Lokhmakov on CodePen.

License.

index.html

<h3>Force JS Stalls<input id="js-stalls" type="checkbox"></h3>

<div class="container">
  <div class="wrapper">
    <h2>CSS Animations</h2>
    <div id="cssanim" class="item"></div>
  </div>

  <div class="wrapper">
    <h2>Web Animations API</h2>
    <div id="waapi" class="item"></div>
  </div>

  <div class="wrapper">
    <h2>GSAP</h2>
    <div id="gsap" class="item"></div>
  </div>

  <div class="wrapper">
    <h2>anime.js</h2>
    <div id="anime" class="item"></div>
  </div>

  <div class="wrapper">
    <h2>Popmotion</h2>
    <div id="popm" class="item"></div>
  </div>

  <div class="wrapper">
    <h2>Velocity</h2>
    <div id="velocity" class="item"></div>
  </div>

<!--   <div class="wrapper">
    <h2>Animar</h2>
    <div id="animar" class="item"></div>
  </div> -->
</div>

script.babel

// Web Animations API
const waapi = document.getElementById("waapi");
if (typeof waapi.animate === "function") {
  waapi.animate(
    [{ transform: "translateX(0px)" }, { transform: "translateX(300px)" }],
    {
      duration: 2000,
      iterations: Infinity,
      direction: "alternate",
      easing: "ease-in-out"
    }
  );
} else {
  waapi.parentElement.firstElementChild.innerText +=
    " (Not Supported in this Browser)";
}

// GSAP
const gsap = document.getElementById("gsap");
TweenMax.to(gsap, 2, {
  transform: "translateX(300px)",
  ease: Power1.easeInOut,
  repeat: Infinity,
  yoyo: true
});

// Anime
anime({
  targets: "#anime",
  translateX: 300,
  duration: 2000,
  direction: "alternate",
  loop: true,
  easing: "easeInOutQuad",
  offset: 0
});

// Popmotion
const { easing, tween, styler } = window.popmotion;
const popm = styler(document.getElementById("popm"));
tween({
  from: 0,
  to: { x: 300 },
  duration: 2000,
  ease: easing.easeInOut,
  flip: Infinity
}).start(popm.set);

// Velocity
const velocity = document.getElementById("velocity");
Velocity(
  velocity,
  {
    translateX: "300px"
  },
  {
    duration: 2000,
    loop: true,
    easing: "ease-in-out"
  }
);

// JS Stalling (Taken from React Native's RNTester Native Animation Example)
let stallInterval = null;
function onStart() {
  stallInterval = setInterval(() => {
    const start = Date.now();
    console.warn("burn CPU");
    while (Date.now() - start < 100) {}
  }, 300);
}

function onStop() {
  clearInterval(stallInterval || 0);
}

const stallCheckbox = document.getElementById("js-stalls");
stallCheckbox.addEventListener("change", () => {
  stallCheckbox.checked ? onStart() : onStop();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js"></script>
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.0.0/velocity.min.js"></script>
<script src="https://cdn.rawgit.com/vincentriemer/animar/functional/dist/animar.min.js"></script>

style.css

@keyframes cssanim {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(300px);
  }
}

#cssanim {
  animation-duration: 2s;
  animation-name: cssanim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

body {
  paddding: 25px;
}

h2 {
  margin: 25px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 25px;
  will-change: transform;
  border-radius: 50%;
}

h3 {
  margin-left: 25px;
}

#js-stalls {
  margin-left: 15px;
}

.wrapper {
  width: 440px;
/*   height: 150px; */
  margin-bottom: 25px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}