Retrieve the status of a CSS animation using JavaScript and display it within an element or log it to the console for future modifications

Question

Retrieve the status of a CSS animation using JavaScript and display it within an element or log it to the console for future modifications

I am experimenting with CSS3 animations to create a marquee effect and want to trigger a function when the animation changes from running to paused or initial state.

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 following code does not display any output:

animationState.innerHTML = animatedText.style.animationPlayState;

Similarly, this code results in a blank <div> and no output in the console:

console.log(animatedText.style.animationPlayState);

Is it feasible to obtain and manipulate states like running|paused|initial|inherit using Javascript through the doSomething() function?

javascript html css

Answer 1

Answer №1

It's quite peculiar, not sure if it's a glitch in the browser or something else.. but it appears that accessing that specific property of the element is not feasible, even when explicitly defined in the CSS.

getComputedStyle seems to be effective 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>

Add witty remark about the deprecation of marquee for a reason here :-p

Answer 2

It's quite peculiar, not sure if it's a glitch in the browser or something else.. but it appears that accessing that specific property of the element is not feasible, even when explicitly defined in the CSS.

getComputedStyle seems to be effective 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>

Add witty remark about the deprecation of marquee for a reason here :-p

Answer 3

Answer №2

If you're looking to create animations based on keyframes and want to check their status programmatically, consider utilizing the Web Animation API. You can use a callback function triggered by the onfinish event handler to monitor the animation's progress.

For more information on the Web Animations API, visit: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

If you need to support older browsers, you can use this polyfill: https://github.com/web-animations/web-animations-js

Alternatively, you can utilize DOM events:

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

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

Answer 4

If you're looking to create animations based on keyframes and want to check their status programmatically, consider utilizing the Web Animation API. You can use a callback function triggered by the onfinish event handler to monitor the animation's progress.

For more information on the Web Animations API, visit: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

If you need to support older browsers, you can use this polyfill: https://github.com/web-animations/web-animations-js

Alternatively, you can utilize DOM events:

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

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

Retrieve the status of a CSS animation using JavaScript and display it within an element or log it to the console for future modifications

Answer №1

Answer №2

Similar questions

What is the process for modifying the attributes of a currency text box in a Dojo within XPages?

Display a notification to the user prior to reloading the page

Using Node.js to integrate Stripe payment method

The command 'vue' is not a valid internal or external command

Send an unchangeable list to a component that needs an Array

Using the 'active' class in Bootstrap-4 Navbar specifically for the parent element

Using the Ruby on Rails redirect_to method

Refreshing the previous tab upon changing tabs in React Navigation TabNavigator

Adjust the alignment and floating of text within an iframe on the same domain

"Angular: Enhancing Functionality with Nested Controllers and Service Dependency Handling

Is it possible to modify an HTML document on the server side using Node.js?

How can I retrieve a formController in AngularJS?

Can a condition be incorporated in a gulpfile to execute a task depending on the size of a file?

Exploring Vue Components Through the Global Scope

What is the best way to attach a click event listener to dynamically generated child elements?

Looking to update the URLs in the text data to a different value

What steps can I take to ensure my code runs smoothly from a USB across all devices?

Converting JavaScript JSON into a PHP array

The elements on the webpage are spilling over with content

Increase resolution of game canvas to support high definition (retina) display