Creating a tv turn off effect

Let’s be clear about how this functions: when you first load the page, it works on the first click because the class has not been added.

So you do the very first click upon page load and it works great, but then you need two clicks, why?

It’s because upon the very first click, you add the class and the animation does its thing.

BUT - the class is is still there - it hasn’t been removed.

So it sounds like you need to remove the class after the animation is complete :slight_smile: .

Each click adds/removes the class. If you click fast enough, you’ll see the tv static go away / come back instantaneously

1 Like

As Ryan said you are simply toggling the class here.

tv.classList.toggle("off");

First click adds the class. second click removes the class and so on…

This is not the same set up as your other pages where you have a class to open the curtains and then you have another class to close the curtains etc.

I assumed you were merging this into your existing page anyway so the toggling won’t be the same as you have here.

I’m using this as a way to test different animation properties so it is easier to test different things.

Clicking on the screen mimics clicking on the exit button.

  animation-name: tv-static, shutdown;
  animation-duration: 1s, 1s;
  animation-delay: 0s, 1s;
  animation-fill-mode: forwards;
.curtain.off .fan svg{
     animation: fan-spin 2.5s ease 0.8s forwards;
}

Would this be changed to something else where only 1 click is needed?

(function (d) {
  const tv = d.querySelector(".curtain");
  tv.addEventListener("click", screenOff);
  function screenOff() {
    tv.classList.toggle("off");
  }

})(document);

Think about how you did this before and you’d need to check for animation end on the fan animation and then remove the off class.

1 Like

Both of these ways work in the code, only using it for testing different properties, so it doesn’t matter which is used. https://jsfiddle.net/xrvpcL7o/

(function (d) {
  const tv = d.querySelector(".curtain");
  tv.addEventListener("click", screenOff);
  function screenOff() {
   tv.classList.remove("off");
setTimeout(() => tv.classList.add("off"), 10);
  }

})(document);


/*
(function (d) {
  const tv = d.querySelector(".curtain");
  tv.addEventListener("click", screenOff);
  
  //---add this---
  tv.addEventListener("animationend", function(e) {
   if(e.animationName==='fan-spin')screenOff();
  });
  //--------------
  
  tv.addEventListener('transitionend',screenOff);
  function screenOff() {
    tv.classList.toggle("off");
  }

})(document);
*/

Yes both of those are implementations of ideas that I gave you a while ago and will be fine for testing.

1 Like

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