JSFiddle - React, Tailwind, and code Playground

CSS variables test to change transition timing function cubic-bezier values

by Travis Almand

HTML

<button id="default">default</button>
<button class="timing" data-bezier="0.175, 0.885, 0.32, 1.275">easeOutBack</button>
<button class="timing" data-bezier="0.075, 0.82, 0.165, 1">easeOutCircle</button>
<button class="timing" data-bezier="0.785, 0.135, 0.15, 0.86">easeInOutCircle</button>
<button class="timing" data-bezier="0.68, -0.55, 0.265, 1.55">easeInOutBack</button>
<br /><br />
<button id="animate">animate</button>
<div id="box"></div>

CSS

#box {
  background: red;
  bottom: 0;
  height: 30px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate3d(-200px, 0, 0);
  transition: all 1s cubic-bezier(var(--timing, 0, 0, 1, 1));
  width: 30px;
}
#box.right {
  transform: translate3d(200px, 0, 0);
}

JavaScript

var $animate = document.querySelector('#animate');
var $box = document.querySelector('#box');
var $default = document.querySelector('#default');
var $timings = Array.from(document.querySelectorAll('.timing'));

$animate.addEventListener('click', function () {
	$box.classList.toggle('right');
});

$default.addEventListener('click', function () {
	document.documentElement.style.removeProperty('--timing');
});

$timings.forEach(function (element, index) {
	element.addEventListener('click', function () {
  	document.documentElement.style.setProperty('--timing', element.dataset.bezier);
  });
});