Cubic Bezier Transition

On click, panel grows with CB transition.

by Ford Heacock

HTML

<div class="panel">

</div>

<div class="panel">

</div>

<div class="panel">

</div>

<div class="panel">

</div>

CSS

.panel {
  height: 100px;
  width: 500px;
  background-color: blue;
  margin: 5px;
  transition: 1s cubic-bezier(0.61,-0.19, 0.7,-0.11);
}

.open {
  width: 1000px;
  transition: .7s cubic-bezier(0.61,-0.19, 0.7,-0.11);
  background-color: darkblue;
}

JavaScript

const panels = document.querySelectorAll('.panel');

function toggle(){
	this.classList.toggle('open');
}

panels.forEach(panel => panel.addEventListener('click', toggle));