Fading out text and background. an issue

Did I do this right? https://jsfiddle.net/xz97npdf/

There is an issue here, trying to figure out why the video is not fading in correctly.

Also, is there anything you would change in here?

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
}

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }
    50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel{
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: black;
}

.panel,
.video-wrapper::after {
  content: "";
  pointer-events: none;
  }

.panel p {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-size: 10.938vw;
  white-space: nowrap;
}

.panel,
.panel p{
  animation: fadeOut 2s ease-in 700ms forwards;
}

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

This part seems to be the issue:

If I don’t want it to be clickable until half way in, how do I do that?

Would this be done a different way?

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }
    50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

It seems to fade in for me. What is the problem you see?

You would set pointer: events to none at 0% and at 49%. Then at 50% you set it to pointer-events:initial.

Remember that pointer events isn’t animatable and changes instantly. That means that if you have none at 0% and initial at 50% then it will switch from none to initial at 0.1%.

I was on a mobile when I checked and it was ok there but I see that on desktop the fade stutters a bit.

I made a reduced test case down to just the video and the stutter happens by default here.

I added a wrapper and faded that instead and the problem seems to go away.

You should be able to see the difference quite plainly in those demos.

In your code you would need to do this to duplicate it.

Add a fade-wrapper around video-frame like this.

<div class="container">

  <div class="video-wrapper">
    <div class="ratio-keeper">
      <div class="fence">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>

      <div class="cross"></div>
      <div class="fade-wrapper">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>

  </div>

  <div class="panel">
    <p>Some text here.</p>
  </div>


</div>

Then change the video frame code to match this with the animation on the fade wrapper instead.

.video-frame,
.fade-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  
  .fade-wrapper {
  animation: fade 5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
  opacity:0;
}

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }
 
  100% {
    opacity: 1;
  }
}

There may indeed be other fixes but the cut down version seems to show that the browser has a problem fading the iframe itself rather than the wrapper.

1 Like

Doing this means the video can be clicked on 20% after 0%

If I understand this correctly. https://jsfiddle.net/td35a1w7/

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }
  
  20% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

No it will switch back to initial at 0.1%.

I already explained that pointer events isn’t animatable so changes are effected immediately.

If you have a red background-color at 0% and and green background-color at 100% then the background fades between the two gradually during the whole keyframe.

With pointer events the only state is on and off. There is no midway state. So you start at 0% but soon as 0% is finished it switches immediately to the new value.

You should do something like this.

 0% {
    pointer-events: none;
    opacity: 0;
  }
19%{pointer-events:none}
20%{pointer-events:initial}

100%{pointer-events:initial}/* last one this may not be needed as its the default*/

Now the video does not appear at all. https://jsfiddle.net/pnab159r/

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

.fade-wrapper {
  animation: fade 5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;
  opacity: 0;
}


@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }

  19% {
    pointer-events: none;
  }

  20% {
    pointer-events: initial;
  }

  100% {
    pointer-events: initial;
  }
}

What happened to the opacity;1 ?

1 Like

Fixed: https://jsfiddle.net/w4me08pr/

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 0;
  }

  19% {
    pointer-events: none;
  }

  20% {
    pointer-events: initial;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

If I remove fade from the video.

How do I add pointer-events: none; so that the video is not clickable until after the text/background has faded out?

Maybe that is not able to be done.

https://jsfiddle.net/bxvp187e/

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

.fade-wrapper {
  /*animation: fade 5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0s forwards;*/
  opacity: 1;
}

@keyframes fade {
  0% {
    pointer-events: none;
    opacity: 1;
  }

  19% {
    pointer-events: none;
  }

  20% {
    pointer-events: initial;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.panel {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: black;
}

.panel,
.video-wrapper::after {
  content: "";
  pointer-events: none;
}

.panel p {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  color: #0059dd;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-size: 10.938vw;
  white-space: nowrap;
}

.panel,
.panel p {
  animation: fadeOut 2s ease-in 700ms forwards;
}

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

Just run the animation called fade but without the opacity:values and keep:pointer-events:none until 99%?

@keyframes fade {
  0% {
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
   }
}

I am still able to play the video while the text is still visible.

Did I do this wrong?

Maybe I did not fully understand what I was supposed to do.

https://jsfiddle.net/6390r5mx/1/

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

.fade-wrapper {
 
}

@keyframes fade {
  0% {
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
   }
}

Yes you removed the animation!!!

.fade-wrapper {
 animation:fade 5s ;
}
1 Like

Depending on which version is being used.

This way works also. https://jsfiddle.net/67ut35ar/1/

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 2s ease-in;
}

@keyframes fade {
  0% {
    pointer-events: none;
  }

  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
   }
}
1 Like

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