Breaking News: Grepper is joining You.com. Read the official announcement!

pass js variable to css animation

T3 answered on April 14, 2022 Popularity 2/10 Helpfulness 3/10

answer pass js variable to css animation

pass js variable to css animation

Comment

document.querySelector('.p2').style.setProperty('--m','100%');
document.querySelector('.p2').style.setProperty('--w','300%');
.p1,.p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
<p class="p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
  This will animate because we changed the CSS variable using JS
</p>

Popularity 2/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: animation css javascript

Link to this answer
Share Copy Link