Stacked flyout links

by Kenneth Luplau-Brøgger

HTML

<ul>
  <li>
    Hej
  </li>
  <li>
    Dav
  </li>
  <li>
    Med
  </li>
  <li>
    Dig
  </li>
  <li>
    Din
  </li>
  <li>
    Lækre
  </li>
  <li>
    Makrel
  </li>
</ul>

CSS

ul {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

li {
  display: inline-block;
  transform-origin: 0% 0%;
  background: orange;
  padding: 0.25rem;
  border: 1px solid red;
  border-radius: 0.5rem;
}

TypeScript

const liList = document.querySelectorAll("li");

function ease(x: number): number {
	return x * x;
}

function map (value: number, start1: number, stop1: number, start2: number, stop2: number): number {
  return ((value - start1) / (stop1 - start1)) * (stop2 - start2) + start2
}

function clamp(value: number, min: number, max: number) {
	return Math.min(max, Math.max(min, value));
}

[...liList].forEach((li, i, array) => {
  const maxRotation = 20;
  const maxOffset = 50;
	const elementEase = ease(map(i, 0, array.length, 1, 0));
  
  li.style.transform = `translateX(${elementEase * maxOffset }px) rotate(${elementEase * maxRotation}deg)`;
});