Get the state of a CSS animation in JavaScript and print it inside an element or on the console so as to later manipulate it

Question

I am trying to replicate a marquee tag using CSS3 animation and I'd like to call a function when the state of the animation changes from running to paused or initial.

HTML:

<div class='animationBackground'><p id="marqueeText">Scrolling Text Goes Here</p></div>
<div id="animationState">Animation State</div>
<button id='stop' type"button" onclick=stopInterval()>Stop Logging</button>

CSS:

@keyframes marquee
    {
        0%   { transform: translate(0%, 0); }
        100% { transform: translate(-200%, 0);}
    }

    p {
        margin-left: 100%;
        padding-inline-end: 50px;
        display: inline-block;
        white-space: nowrap;
        color: #ffffff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30pt;
        z-index: 10;
        animation: marquee 25s linear 0s 1
    }

    .animation{
        width: 100%;
        background-color: darkblue;
        vertical-align: bottom;
    }

JavaScript:

var myVar = setInterval(myTimer, 5000);

function myTimer() {
    var marqueeText = document.getElementById('marqueeText');
    var animationState = document.getElementById('animationState');
    animationState.innerHTML = marqueeText.style.animationPlayState;
    console.log(marqueeText.style.animationPlayState);

    if(marqueeText.style.animationPlayState == "running"){
        doSomething();
    }

}

function stopInterval(){
    clearInterval(myVar);
}

The line below doesn't yield anything:

animationState.innerHTML = animatedText.style.animationPlayState;

nor does this one. I get a blank <div> and the console also doesn't print anything.

console.log(animatedText.style.animationPlayState);

Is it possible to get any of the states so as to manipulate them using Javascript? e.g running|paused|initial|inherit using the doSomething() function.

This has rather little to do with animations per se, and is rather just the general “problem” that element.style only allows you to read styles that where explicitly set before (style attribute, or JS) - but that is not the case anywhere in your code. Try getComputedStyle instead. — C3roe
– C3roe, Commented Jun 26, 2018 at 14:47

dgeare · Accepted Answer · 2018-06-26 15:27:16Z

Odd, I don't know if it's a browser bug or what.. but it seems that you can not, in fact, access that property of the element, even if it's explicitly assigned in the css.

getComputedStyle does seem to work though.

var myVar = setInterval(myTimer, 2000);

var marqueeText = document.getElementById('marqueeText');
function myTimer() {
    var computedStyle = window.getComputedStyle(marqueeText);
    printState(computedStyle.animationPlayState);
    if(computedStyle.animationPlayState == "running"){
        //doSomething();
    }

}

function stopInterval(){
    clearInterval(myVar);
    marqueeText.style.animationPlayState = "paused";
    var computedStyle = window.getComputedStyle(marqueeText)
    printState(computedStyle.animationPlayState);
}

function printState(state){
  var animationState = document.getElementById('animationState');
  console.log(state);
  animationState.innerHTML = state;
}

@keyframes marquee
    {
        0%   { transform: translate(0%, 0); }
        100% { transform: translate(-200%, 0);}
    }

    p {
      color:#000;
        margin-left: 100%;
        padding-inline-end: 50px;
        display: inline-block;
        white-space: nowrap;
        
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30pt;
        z-index: 10;
        animation: marquee 25s linear 0s 1;
        
    }

    .animation{
        width: 100%;
        background-color: darkblue;
        vertical-align: bottom;
    }

<div class='animationBackground'><p id="marqueeText">Scrolling Text Goes Here</p></div>
<div id="animationState">Animation State</div>
<button id='stop' type"button" onclick=stopInterval()>Stop Logging</button>

Insert snarky comment about marquee being deprecated for a reason here :-p

GibboK · Accepted Answer · 2018-06-26 15:27:19Z

1

You could consider using Web Animation API in order to create keyframes based animations and check their status programmatically using a callback when event handler onfinish is being trigged.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

in case you need to support older browsers you can use this polyfill:

https://github.com/web-animations/web-animations-js

or you can use the dom event

window.onload = function() {
  var elm = document.querySelector('.marquee'); // get dom with your animation

  elm.addEventListener('animationend', function(e) { 
    console.log('fires when animation ends');
  });
  elm.addEventListener('animationstart', function(e) { 
    console.log('fires when animation starts');
  });
}

edited Jun 26, 2018 at 15:27

answered Jun 26, 2018 at 15:21

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

Collectives™ on Stack Overflow

Get the state of a CSS animation in JavaScript and print it inside an element or on the console so as to later manipulate it

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related