text orientation change using currentTime of anim object (immediate pausing)

by ShaCP

HTML

<div id="one">
    <span id="oneText">Hello</span>
  </div>
  <button id="playButton">
    Play
  </button>
    <button id="pauseButton">
    Pause
  </button>
  <button id="reverseButton">
    Reverse
  </button>
  <button onclick="console.clear()">
    Clear Console
  </button>

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;
}

#oneText {
  display: inline-block;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vw;
}

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

@keyframes move {
  from {
    transform: rotate(360deg);
  }
}

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) => {
  if (e.animationName === "move-text") {
    window.requestAnimationFrame(step);
  }
}) */
console.clear();

one.addEventListener("animationstart", () => console.log('end'))


let anim;
let animText;
/* 
let reverse = true; */

const startAnim = (animation, playBackMode) => {
  let timesRun = 0;
  let reqId; 

  return () => {
    cancelAnimationFrame(reqId);
    /* animation.playbackRate = animation.playbackRate === 1 ? -1 : 1; */
    console.log("playback rate *", animation.playbackRate, "start");
    if (!(timesRun++)) {
      animation.play();
    } else {
      animation[playBackMode]();
      /* one.classList.toggle("play") */
    }
    console.log("timing", animation.effect.getComputedTiming().direction, "playBackMode", playBackMode);
    const checkTimeAndChangeOrientation = (timestamp) => {
      console.log("cTACO - playback rate *", animation.playbackRate);
      console.log("currentTime", animation.currentTime, anim, timestamp);
      if (timesRun % 2 ? animation.currentTime > 250 : animation.currentTime < 250) {
        /* one.style["text-orientation"] = one.style["text-orientation"] !== "unset" ? "unset" : "upright"; */
        cancelAnimationFrame(reqId);
      } else if (animation.playState !== "paused") {
        reqId = requestAnimationFrame(checkTimeAndChangeOrientation);
      }
    }

    animation.onfinish = function() {
      console.log("animationend")
      cancelAnimationFrame(reqId);
      console.log("reqId", reqId)
      /*  animation.playbackRate = animation.playbackRate === 1 ? -1 : 1; */
      console.log("playback rate *", animation.playbackRate, "end");
      animation.pause();
      /*       if (playBackMode === "play") {
            animation.playbackRate = animation.playbackRate...