First text appears, then fades out. 2nd text appears, then splits in half

This part is working.
2nd text appears splits in half.

This part is not.
first text appears, then fades out.

No text is appearing.

I think I may have the html set up the wrong way to do this.

https://jsfiddle.net/jkzv7ud2/

    <div class="text1">
      <p>some text here</p>
    </div>

    <div class="panel-left">
      <p>[ Enjoy The Music ]</p>
    </div>
    <div class="panel-right">
      <p>[ Enjoy The Music ]</p>
    </div>
    
  </div>
</div>
 .text1 p {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 6.25vw;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  animation: fadeOut 1s ease-in 2s forwards;
}

@keyframes fadeOut {
  to {
   opacity: 0;
  }
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  user-select: none;
}
.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  user-select: none;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-color: black;
}

.panel-right::before {
  left: -100%;
}

.curtain .panel-left {
  animation: slideLeft 8s forwards;
  animation-delay: 6s;
}

@keyframes slideLeft {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

.curtain .panel-right {
  animation: slideRight 8s forwards;
  animation-delay: 6s;
}

@keyframes slideRight {
  to {
    transform: translateX(calc(100% + 1px));
  }
}

.panel-left p,
.panel-right p {
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 7.031vw;
  /*1280 60px*/
  white-space: nowrap;
  animation: fadeIn 2s ease-in 2.8s forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.panel-right p {
  left: -100%;
}

I think I just fixed it. https://jsfiddle.net/dfjxv4my/

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">
      <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
    </div>
    <div class="panel-left">
      <p>[ Enjoy The Music ]</p>
    </div>
    <div class="panel-right">
      <p>[ Enjoy The Music ]</p>
    </div>
    <div class="text1">
      <p>some text here</p>
    </div>
  </div>
</div>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.