How do I pause a css animation on a svg with the click of a button?

Question

I was following this tutorial: https://www.youtube.com/watch?v=y0Ic8QcvyK8 and i decided i wanted to pause the animation with the click of a button. I have tried and tried and tried. Searched through w3schools, searched here, searched wherever google sent me too... maybe im just dumb and cant figure it out alone ....

This is the html im using

MY CSS

    margin: 0 ;
    padding: 0;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center ;
    height: 100vh;
    display: table ;
    background-color: black;

}

.wrapper {
    position: absolute; 
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
}

.st0{
    fill:none;
}

.st1{
    fill:none;
    stroke:;
    stroke-width:3;
    stroke-miterlimit:10;
}

path {
    stroke: white ;
    fill: #fff;
    stroke-dasharray: 300;
    opacity: 10;
    animation: animate 3s cubic-bezier(0,0.23,1,.1) infinite;
}

@keyframes animate {

    0% {
        opacity: 0;
        fill: none;
        stroke-dashoffset: 300;
    }

    30% {
        opacity: 10;
        fill: none ;
        stroke-dashoffset: 300;
    }

    90% {
        opacity: 50;
        /*fill: rgba(255,255,255,1);*/
    }

    100% {
        opacity: 10;
        /*fill: rgba(255,255,255,1);*/
    }
}

and my JS

function change(){

    var button = document.getElementById('b1'),
        estado = document.getElementsByClassName("st1");

        button.onclick = function() {
            estado.style.animationPlayState = "paused";
        }    

}

Much appreciated !

NevNein · Accepted Answer

There are a few things that you got wrong with your JS.

By binding the change() function on the button in your HTML, you're executing it every time the user clicks it, but the function itself binds a click event to your button. Since you're already binding the event in the JS (which is the best practice, by the way), you need to remove the change() function from your HTML and just call it directly, so the click event will be bound only once.
getElementsByClassName, as the plural in the name suggests, doesn't return a single element but rather a collection of elements, which means that you have to loop through the collection to access the style attribute of each element.

How do I pause a css animation on a svg with the click of a button?

Answers (1)

Related Questions