Text orientation change animation

by ShaCP

HTML

<div id="one">
  <span>Hello</span>
  </div>

CSS

#one {
  width: 100px;
  height: 100px;
  background-color: lightskyblue;
  position: relative;
  animation: 3s linear forwards;
  margin-top: 100px;
  writing-mode: vertical-lr;
  text-orientation: upright;
  letter-spacing: -1px;
}

body {
  margin: 0;
}

#one.play {
  animation-name: move;
}

#one.play span {
  animation: move-text 3s forwards;
  display: inline-block;
}

#one.off {
  writing-mode: unset;
  text-orientation: unset;
  letter-spacing: unset;
}


@keyframes move {
  100% {
    transform: translate(300px);
    margin: 0;
  }
}

@keyframes move-text {
  50% {
    transform: scale(0);
  }
}

JavaScript

one.addEventListener("click", (e) => {
  e.target.classList.toggle("play");
  e.target.classList.remove("off");
})

/* one.addEventListener("animationend", (e) => e.target.classList.toggle("play")) */

one.addEventListener("animationstart", (e) => {
  window.requestAnimationFrame(step);
  setTimeout(() => e.target.classList.toggle("off"), 1500);
})

/* one.addEventListener("animationend", () => e.target.classList.toggle("off")) */


let i = 0;
const duration = 2000;

const element = document.getElementById("one");
let start;

function step(timestamp) {
  console.log("timestamp", timestamp);
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  console.log("elapsed", elapsed, i++);
  // `Math.min()` is used here to make sure that the element stops at exactly 200px.
  console.log(0.1 * elapsed)
  element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

  if (elapsed < duration) { // Stop the animation after 2 seconds
    window.requestAnimationFrame(step);
  } else {
    console.log("end")
  }
}