How to get animation to run as well as change the innerHTML property at the same time?

Question

I am trying to get a square shape to flip on its Y-axis (rotate 180 degrees) so it shows its "back side", and change from blue to red, as well as change the innerHTML property of this div, so that the text in the div in its final state is different to the text that was there initially (before the flipping). So the word that appears on the front side, "DAY", changes to "MONDAY" on the back side after the flipping.

To try and achieve this, I used css animation.

I was able to get the box to rotate and change color. However, I was unsuccessful in changing the text in the way I wanted. The word "Monday" appears on the front side using the code below. I only want "Monday" to appear on the back side.

Another potential problem is how to display the text so that it is not flipped (reversed) after the flipping of the box.

One possible solution to the flipping of the text problem I found was here: w3docs:

.flipH {
        transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
      }

However, I still do not know how to change the text the way I want it. (And I haven't really tested the flipping of the text properly, as I want to first find out how to change the actual words.)

What I have tried is below but it doesn't work to change the text in the right way.

I have thought of using canvas to insert the text but the discussion about using canvas as a css background that I found Use Canvas as a CSS background here on Stack Overflow was too complicated for me, and I did not fully understand it, and the code that was given as the solution in one of the answers seems to have been deprecated.

So I am asking this question to see if there is another solution to the problem of changing the text for an element that is undergoing animation.

I also tried making a div that was underneath the top div and was hidden using the display property ("display: none") before the flipping, and then becoming visible using "display: block" (and also changing the z-index property), using animation (key frames), but it did not work. The div underneath would not display even though I used animation to change the properties of this div - changing the display property from "none" to "block").

I also tried using the "content" property which is talked about here Animating the content property but I found the box suddenly shrunk to the size of the text when I used this property.

function myPlayFunction(el){
  document.getElementById("day").innerHTML = "Monday";
  document.getElementById("day").style.animationPlayState = "running";   
}

* {
  box-sizing: border-box;
}   

    
#day {
  
  position: relative;
  margin-top: 150px;
  margin-left: 150px; 
  margin-bottom: 150px;
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 1s; 
   z-index: 10;
   transform-origin: center;
   animation-iteration-count: 1;
   animation-timing-function: linear;
   text-align: center;
    line-height: 200px;
    font-size: 50px;
    font-family: 'Helvetica'; 
    font-weight: 800;
    
}

@keyframes example {
  100%{background-color: red; transform: rotateY(180deg); transform: scale(-1, 1);
        color: #1c87c9;
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);}
}

<div id="day">DAY</div>

<div><p>Click the buttons to Play/Pause the animation:</p></div>
<div><button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button>
</div>

Mind moving your snippets to the snippet editor (the button on the post textarea with the `<>` icon on it) so we can see a working example of your current state? — Chris W., Jun 18 '21 at 17:03

Pulse · Accepted Answer · 2021-06-18T17:15:43.283

function myPlayFunction(el){
   document.getElementById("day").innerHTML = "Monday";
   document.getElementById("day").style.animationPlayState = "running";  
}

#day { 
  position: relative;
  margin-top: 150px;
  margin-left: 150px; 
  margin-bottom: 150px;
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 1s; 
  z-index: 10;
  transform-origin: center;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
  font-family: 'Helvetica'; 
  font-weight: 800;   
}

@keyframes example {
  50%{transform: rotateY(90deg);}
  100%{background-color: red; transform: rotateY(0deg);}
}

<div id="day">DAY</div>

<div><button onclick="myPlayFunction(this)" class="fas fa-play">Click this</button>
</div>

You can do it by a little bit change in your @keyframes:

@keyframes example {
  50%{transform: rotateY(90deg);}
  100%{background-color: red; transform: rotateY(0deg);}
}

You are not actually rotating your div 180deg(this will help the reverse text problem) but user thinks the div is rotating

It fixes the reversing the letters problem. What about changing the word from "DAY" to "MONDAY"? "MONDAY" should only appear after the rotation has finished. @Pulse — Honeybear65, Jun 18 '21 at 17:46

score 0 · Answer 2 · answered Jun 18 '21 at 19:52

I was able to do this by using setTimeout and using Pulse's solution for the text flip.

Here is the code:

function myPlayFunction(el){
    setTimeout(myFunction, 1500);
    document.getElementById("day").style.animationPlayState = "running";
    function myFunction() {
       document.getElementById("day").innerHTML = "MONDAY";
    }
}

#day { 
  position: relative;
  margin-top: 150px;
  margin-left: 150px; 
  margin-bottom: 150px;
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: example;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 1s; 
   z-index: 10;
   transform-origin: center;
   animation-iteration-count: 1;
   animation-timing-function: linear;
   text-align: center;
    line-height: 200px;
    font-size: 40px;
    font-family: 'Helvetica'; 
    font-weight: 800;
    
}

@keyframes example {
   50%{transform: rotateY(90deg);}
  100%{background-color: red; transform: rotateY(0deg); 
}

<div id="day">DAY</div>

<div><button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button>
</div>

How to get animation to run as well as change the innerHTML property at the same time?

2 Answers2