Toggle between pausing and running CSS animations with this handy button!

Question

Toggle between pausing and running CSS animations with this handy button!

My awesome graphic animation is in CSS and SVG format. I've been struggling to add a play/pause button to control the animation on click. Here is what I have so far:

    .animation1 {
        --animation-delay: 0.1s;
        animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
    }
    
    .playani {
        animation-play-state: running;
    }
    
    .animation1:hover {
        animation: none;
        fill: #666;
    }

@keyframes ani_keyframes {
...
...

}

<script type="text/javascript">
    var button = document.getElementById('button-ani'),
        test_ani = document.getElementByClassName('animation1');
    
    button.onclick = function(){
      test_ani.classList.toggle('playani');
    }
  
</script>

<div id="animation1_wrapper">

<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
    
    <g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
.....
.....
.....
</g>
</svg>
</div>

 <button id="button-ani">Toggle Animation Play State</button>

javascript html jquery css css-animations

Answer 1

Answer №1

When you use document.getElementsByClassName('animation1'), you receive an HTMLCollection object. However, ClassList applies to specific elements, so you need to select the element by using an indexer to make your code function correctly.

var button = document.getElementById('button-ani');

var test_ani = document.getElementsByClassName('animation1');
// You need to use [0] to access the element from the HTML collection obtained.

button.onclick = function(){
  test_ani[0].classList.toggle('playani');
}

.animation1 {
      --animation-delay: 0.1s;
      animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
  }

  .playani {
      animation-play-state: running;
  }

  .animation1:hover {
      animation: none;
      fill: #666;
  }

  @keyframes ani_keyframes {
    from{
      transform:scale(0);
    }
    to{
      transform:scale(1.1);
    }

}

<button id="button-ani">Toggle Animation Play State</button>
<div id="animation1_wrapper">

<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
    
    <g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
.....
.....
.....
</g>
</svg>
</div>

Answer 2

When you use document.getElementsByClassName('animation1'), you receive an HTMLCollection object. However, ClassList applies to specific elements, so you need to select the element by using an indexer to make your code function correctly.

var button = document.getElementById('button-ani');

var test_ani = document.getElementsByClassName('animation1');
// You need to use [0] to access the element from the HTML collection obtained.

button.onclick = function(){
  test_ani[0].classList.toggle('playani');
}

.animation1 {
      --animation-delay: 0.1s;
      animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
  }

  .playani {
      animation-play-state: running;
  }

  .animation1:hover {
      animation: none;
      fill: #666;
  }

  @keyframes ani_keyframes {
    from{
      transform:scale(0);
    }
    to{
      transform:scale(1.1);
    }

}

<button id="button-ani">Toggle Animation Play State</button>
<div id="animation1_wrapper">

<svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
    
    <g id="ani_graphic">
<path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
.....
.....
.....
</g>
</svg>
</div>

Answer 3

Answer №2

utilize

document.querySelector('.animation1');

rather than

document.getElementsByClassName('animation1');

I implemented a translate animation for illustration purposes. Hopefully, it functions as intended :).

var button = document.getElementById('button-ani');
var test_ani = document.querySelector('.animation1');
    
button.onclick = function(){
  test_ani.classList.toggle('playani');
}

.animation1 {
  --animation-delay: 0.1s;
  animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}

.playani {
  animation-play-state: running;
}

.animation1:hover {
  animation: none;
  fill: #666;
}

@keyframes ani_keyframes {
  from{
    transform:translateX(0px);
  }
  to{
    transform:translateX(-100px);
  }

}

<button id="button-ani">Toggle Animation Play State</button>

<div id="animation1_wrapper">
  <svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="ani_graphic">
      <path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
      .....
      .....
      .....
    </g>
  </svg>
</div>

Answer 4

utilize

document.querySelector('.animation1');

rather than

document.getElementsByClassName('animation1');

I implemented a translate animation for illustration purposes. Hopefully, it functions as intended :).

var button = document.getElementById('button-ani');
var test_ani = document.querySelector('.animation1');
    
button.onclick = function(){
  test_ani.classList.toggle('playani');
}

.animation1 {
  --animation-delay: 0.1s;
  animation: ani_keyframes 1.8s linear infinite var(--animation-delay) paused;
}

.playani {
  animation-play-state: running;
}

.animation1:hover {
  animation: none;
  fill: #666;
}

@keyframes ani_keyframes {
  from{
    transform:translateX(0px);
  }
  to{
    transform:translateX(-100px);
  }

}

<button id="button-ani">Toggle Animation Play State</button>

<div id="animation1_wrapper">
  <svg id="animation1" width="100%" height="100%" viewBox="0 0 418 255" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="ani_graphic">
      <path class="animation1" d="M263.46 25.3801C257.63 29.2001 252.88 33.7801 249.33 37.8001H263.46V25.3801Z" fill="#000"></path>
      .....
      .....
      .....
    </g>
  </svg>
</div>

Toggle between pausing and running CSS animations with this handy button!

Answer №1

Answer №2

Similar questions

Issue with custom font display malfunction

Trigger $q manually in AngularJS

Troubleshooting jQuery's issue with dynamically adding input fields

Wordpress easily adjusts post alignments for a seamless display

changing a variable in javascript

"Nested AngularJS controllers: a deep dive into the world

How can you trigger a modal to appear when an image is clicked?

Displaying and Concealing Divisions

Bringing in d3js into Angular 2

What is the best way to make sure that the parent div of an svg shows its shadow on top of the svg itself?

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

Executing processes individually within AngularJS

From transitioning from a radio button's checked indicator to a complete button

Leveraging the power of the vuejs plugin within the main.js script

What is the best way to transfer JSON data to a different controller in AngularJS?

The modal fails to display when the content is positioned below a setInterval function

Utilizing unique symbols to dynamically add form elements to an HTML page with jQuery's append method

Executing a JavaScript file within the Meteor JS ecosystem

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

When the mouse leaves the area, I would like the iframe within the div to be refreshed