Adding a fade-in to the exit button

Adding to that, or, in addition to that,

How would I be able to have the exit button also fade out after it is clicked?

https://jsfiddle.net/3xym0f5s/

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}
  keyframes fadeIn {
  to {
   visibility: visible;
    opacity: 1;
  }
}

Hi Alex,

In this case the visibility is required because there is a delay to the animation and for a full 8s you can click the empty space accidentally before you see the icon appear.

I usually use pointer-events :none or layer it below something else or indeed move it off screen. In this case visibility seems more efficient :slight_smile:

2 Likes

You could probably use the fadingOut class to trigger another animation similar to the way you closed the curtain in the other thread.

You would need to set the key frame to stay visible until 99% and then only at 100% make it hidden. Otherwise it will disappear straight away.

I’m on a mobile at the moment so can’t test it out but you have already done similar so see if you can work it out yourself. :slight_smile:

1 Like

I got part of it working.

Currently there is no fade when the exit button is clicked, it just disappears.

How would that be fixed? https://jsfiddle.net/unv3ko79/

https://jsitor.com/uHODdOEcZ

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

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

.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 0;
}

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

I already told you how :slight_smile:

Also why did you set it to opacity:0 before the keyframe even started. There will be nothing to fade out!

Use this:


.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99%{visibility:visible;}
  100% {
    visibility: hidden;
    opacity: 0;
  }
}
1 Like

There is an issue.

Clicking on the exit button before it fully fades in.

How would the be fixed or adjusted in the code?

What happens is:

When clicking on the exit button before it fully fades in is that it forces the svg to fade in fully, then it begins to fade out.

The svg/exit button instead should stop fading in, then from that spot, start fading out.

https://jsfiddle.net/8e13js47/

Is that something that can be adjusted or fixed in the code?

.exit {
  animation: fadeIn 8s forwards 8s;
  visibility: hidden;
  opacity: 0;
}

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

.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

Yes if you use pointer-events:none to start with that I showed in one of your other demos instead of visibility and then you can see it when it fades in.

When fading in you would have a default of pointer-events:none and then in the keyframe you repeat pointer-events:none at 99% and only at 100% would you set it to initial.

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: transparent;
  fill: red;
  padding: 0;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeIn 8s forwards 8s;
 /* visibility: hidden;*/
  opacity: 0;
  pointer-events:none;
}

@keyframes fadeIn {
  99%{pointer-events:none;}
  100% {
    pointer-events:initial;
    opacity: 1;
  }
}

Then do the reverse for the fadeout.

1 Like

When you say do the reverse for the fadeout, what does that mean?

https://jsfiddle.net/zphjgdrb/

.exit { 
  animation: fadeIn 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeIn {
  99% {
    pointer-events: none;
  }

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


.fadingOut .exit {
  animation: fadeOut 8s forwards;
  visibility: visible;
  opacity: 1;
}

@keyframes fadeOut {
  99% {
    visibility: visible;
  }

  100% {
    visibility: hidden;
    opacity: 0;
  }
}

basically this:

.fadingOut .exit {
  animation: fadeOut 8s forwards;
  pointer-events:none;
  opacity:1;
}

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

I got it. thanks.
https://jsfiddle.net/7f0z6qau/


.exit {
  animation: fadeInExit 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

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

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events:none;
  opacity:1;
}

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

I created a new exit button and pointer-events: initial; is creating white space around the svg.

When it is removed, there is no white space, then when it is added back in, white space appears.

In the code example I provided here you can see the white space by both the mouse cursor changing to pointer, and from the svg changing to green before the mouse touches the svg.

The exit button code by itself: https://jsfiddle.net/9xkesw3q/

Is there a solution to this? Would pointer-events: initial; be replaced with something else? or, maybe I don’t have it set up correctly, I am not sure.

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeInExit 0s forwards 0s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

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

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

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

button.exit {
  pointer-events: none;
}

.exit:hover .exitHover {
  fill: green;
}

html

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
          </g>
        </svg>
      </button>

In addition to that, for some reason, it’s not working in the YouTube code.

The issue is that the space where the svg button is, it’s clickable before the svg fades in on the screen. I’m not really sure what the reason for that is.

https://jsfiddle.net/ofk8b5L9/2/

If it is clickable, that must mean, I’m missing a pointer-events: none; somewhere in the code?

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeInExit 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  
  100% {
   /* pointer-events: initial;*/
    opacity: 1;
  }
}

.fadingOut .exit{
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

@keyframes fadeOutExit {
  to {
    opacity: 0;
  }
}
button.exit {
  pointer-events: none;
}

Update: It’s because of this line I added to the code.

<circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />

But I have it in there for a reason, to remove the white space, which is the same method I used with the play buttons, and that worked fine.

That line is allowing the svg to be clicked on before it has faded in.

Would there be a way to delay or prevent:

<circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />

From being clicked on until after the svg has faded in?

Would I be able to add visibility: hidden; to it, or something that would make it stay unclickable?

To try to find a solution, I made this to test on. https://jsfiddle.net/5jzo8apL/

There are currently 2 issues:

1) pointer-events: initial; creates unnecessary white space.

2) This line needs to stay unclickable until after the svg has faded in.

<circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />

2 can be tested by putting the mouse cursor over the empty fade in space to see if there is a pointer, if there is one, that means the space is clickable.

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  /*animation: 8s fadeIn;
  animation-fill-mode: forwards;
  animation-delay: 8s;*/
  animation: fadeInExit 12s forwards 0s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

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

button.exit {
  pointer-events: none;
}

.exit:hover .exitHover {
  fill: green;
}

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <circle cx="0" cy="0" r="144" fill="transparent" pointer-events="visiblePainted" />
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
          </g>
        </svg>
      </button>

Adding visibility: hidden; works to keep visiblePainted unclickable, but then the svg does not fade out, it just disappears.

I almost got it there. https://jsfiddle.net/7p3mcn8v/

.exit {
  animation: fadeInExit 8s forwards 8s;
  /* visibility: hidden;*/
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

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

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;
}

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

And: visibility: visible; is not able to be used in here:

Which is where the post #13 issue comes up again.

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
}

Update: This works: https://jsfiddle.net/mbxkenq9/

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}
.exitHover {
  pointer-events: none;
}
.exitCircle{
  cursor: pointer;
}

.exitCircle:hover + .exitHover {
  fill: green;
}
<button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            
            <circle class="exitCircle" cx="0" cy="0" r="144" fill="transparent" />
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)" fill="red" />
          </g>
        </svg>
      </button>

But, I am having difficulty adding it to the YouTube code.

My attempt: https://jsfiddle.net/po93j1nk/

I wasn’t able to get the hover working, that and, clicking off the circle closes it.

I am finding that,

That does not work as the cursor: pointer; needs to be on the .exit class.

I’m back to square 1. https://jsfiddle.net/g9de2rnu/

Using Dev Tools: The Green https://jsfiddle.net/t34adqxo/

Top left, right, bottom left, bottom right off the svg is clickable white space.

Update:

Adding: clip-path: circle(50%); fixes the white space issue.

I’m down to 1 issue:

The hover works stand alone, by itself:

Seen Here: https://jsfiddle.net/02ke4r5v

.exit:hover .exitHover {
  fill: green;
}

When I place it in my code it does not work.

Seen Here: https://jsfiddle.net/hnba7z0d/

How would I get hover to work on the exit Button?

Update: Hover now works.

https://jsfiddle.net/2tkvf1ur/

.exit svg {
  fill: red;
}

.exit:hover svg {
  fill: green;
}

Removed fill from here:

<button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <path class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)"/>
          </g>
        </svg>
      </button>

How would I Fade out the exit svg on the hovered color?

It goes from red, hovers to green.

Then, how would I have it fade out on green?

https://jsfiddle.net/9ejofLs1/

.exit:hover svg {
  fill: green;
}

.fadingOut .exit {
  animation: fadeOutExit 8s forwards;
  pointer-events: none;
  opacity: 1;

}

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

Like this:

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
}
1 Like

Here I added an animation for hover fade in.

I think I did this right.

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
  animation: exitHoverFadeIn 3s ease forwards;
}

@keyframes exitHoverFadeIn {
  from {
    fill: red;
  }
}

How do I add an animation for hover fade out? https://jsfiddle.net/gwtmhL58/

I was thinking it would be written this way.

Then where would the animation line be placed?

I am stuck on this.

animation: exitHoverFadeOut 3s ease forwards;

@keyframes exitHoverFadeOut {
  to {
    fill: red;
  }
}

You don’t need an animation for a simple color hover change.

.exit svg {
  fill: red;
  transition: fill 1s ease;
}
.exit:hover svg  {
  fill: green;
}

That will transition in and out.

1 Like

That was going to be my next question because I was reading about it and that transition should be used with hover, but I was not able to figure it out.

https://jsfiddle.net/2t1bzg43/

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg,
.fadingOut .exit svg  {
  fill: green;
}

The transition is applied to the normal state of the element and then when the property you are transitioning is changed in some way (e.g. via hover) then it will transition to that new value assuming it is a property that can be transitioned.

1 Like

On the exit button, after the exit button is clicked, the cursor changes to default.

I think pointer-events: none; was used to do that.

  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

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

How do I add that with .thePlay ? https://jsfiddle.net/6m9owcL8/1/

.thePlay {
}

If that is not how it was done,

How was that done, and how do I do that with .thePlay svg button?

How would I add pointer-events: none; to the svg play buttons after they are clicked?

That is how it works with the exit button, the cursor changes to default after it is clicked.

Which is caused by this I think: pointer-events: none;

If I am understanding what the issue is, I might not be.

I know that, after clicking on the exit button , the cursor changes from pointer to default , and stays on default after it is clicked.

I’m trying to do the same thing with the svg play button.

In the fiddle you can see that after the svg play button is clicked, the cursor does not stay as default, it changes back to pointer.

Which allows for a 2nd button to be clicked before the buttons fade out completely.