text orientation change using currentTime of anim object

by ShaCP

HTML

<div id="one">
  <span>Hello</span>
  </div>
  <button onclick="anim.play()">
Play
</button>

<button onclick="anim.reverse()">
Reverse
</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;
}

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);
  }
}) */

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

const divElem = document.querySelector('div');

let anim;
let reverse = true;

one.addEventListener('click', evt => {
reverse = !reverse;
  anim = one.animate({
    transform: `translate(200%)`
  }, {
    duration: 500,
    fill: 'forwards',
    easing: "linear",
    /* direction: reverse ? "reverse" : "normal" */
  });
  anim.pause();
  console.log(anim.playState)

  /* anim.commitStyles() */
  ;

  /* anim.persist() */


  anim.onremove = function() {
    console.log('Animation removed');
  }

  const checkTimeAndChangeOrientation = (timestamp) => {
    console.log("currentTime", anim.currentTime, anim, timestamp);
    if (anim.currentTime > 250) {
      one.style["text-orientation"] = one.style["text-orientation"] !== "unset" ? "unset" : "upright";
      cancelAnimationFrame(reqId);
    } else if (anim.playState !== "paused") {
    reqId = requestAnimationFrame(checkTimeAndChangeOrientation);
    }
  }
  anim.onfinish = function() {
    console.log("animationend")
    cancelAnimationFrame(reqId)
    ;
  }
if (anim.playState !== "paused") {
  let reqId = requestAnimationFrame(checkTimeAndChangeOrientation);
  }

  console.log(anim.replaceState);
});