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

console.clear();

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


let anim;
let animText;

const createAnimationStarter = (animation) => {
  let timesRun = 0;
  let reqId;

  const start = (playBackMode) => {
    return () => {
      cancelAnimationFrame(reqId);
      console.log("playback rate *", animation.playbackRate, "start");
      if (!(timesRun++)) {
        animation.play();
      } else {
        animation[playBackMode]();
        /* one.classList.toggle("play") */
      }
       console.log("timesRun", timesRun);
      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)
        console.log("playback rate *", animation.playbackRate, "end");
        animation.pause();
      }

      if (animation.playState !== "paused") {
        reqId = requestAnimationFrame(checkTimeAndChangeOrientation);
      }

      console.log(animation.replaceState);
    }
  }

  return {
    play: start("play"),
    reverse: start("reverse")
  }
}

anim = one.animate({
  transform: 'translate(200%)'
}, {
  duration: 500,
  fill: 'forwards',
  easing: "linear",
  /* direction: reverse ? "reverse" : "normal" */
});

anim.pause();

textAnim = oneText.animate({
  transform: 'scale(0)',
...