CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Chlebqowy
Chlebqowy

Reputation: 23

JS gets initial value for an animating property instead of the current one

This is my html

function getAnimState() {
  document.getElementById("count").innerHTML = getComputedStyle(document.documentElement).getPropertyValue("--opacity")
}
@property --opacity {
  syntax: "<number>";
  initial-value: 9;
  inherits: false;
}

@keyframes breatheFade {
  0%,
  100% {
    --opacity: 25;
  }

  50% {
    --opacity: 100;
  }
}

.count {
  animation-name: breatheFade;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  font-size: 20vh;
  opacity: calc(var(--opacity)*1%);
}
<button class="count" id="count" onclick="getAnimState()">Click to see opacity</button>

But when I try to click the button at any frame, I just get the default value no matter what it is and what the animation displays.

Does anyone know why is that the case and how could I fix it? Is there another solution to get the value at the time of the call of the function?

I was expecting to see the current opacity and work with it with further js.

I tried asking chatgpt but it made up errors. Google also didn't help.

I made a jsfiddle for it at https://jsfiddle.net/h0zyguLr/

Upvotes: 1

Views: 38

Answers (1)

Ori Drori
Ori Drori

Reputation: 192607

The root value of --opacity doesn't change. The value inside .count does. Get the computed styles of .count.

function getAnimState() {
  document.getElementById("count").innerHTML = getComputedStyle(document.querySelector('.count')).getPropertyValue("--opacity")
}
@property --opacity {
  syntax: "<number>";
  initial-value: 9;
  inherits: false;
}

@keyframes breatheFade {
  0%,
  100% {
    --opacity: 25;
  }

  50% {
    --opacity: 100;
  }
}

.count {
  animation-name: breatheFade;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  font-size: 20vh;
  opacity: calc(var(--opacity)*1%);
}
<button class="count" id="count" onclick="getAnimState()">Click to see opacity</button>

Upvotes: 3

Related Questions