0

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 

<!DOCTYPE html>
<html lang="en" onscroll="scroller()">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript" src="myscripts.js"> </script>
<script type="text/javascript" src="svg.js"> </script>
</head>
<body>

<button id="b1" class="b3" onclick="change()"></button>
<div class="wrapper">

<svg id="tudo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1350 620" style="enable-background:new 0 0 1350 620;" xml:space="preserve">
   <style type="text/css">

</style>
<g>
  <rect x="14.41" y="12.48" class="st0" width="1414.59" height="596.52"/>
  <path id="p1" class="st1" d="M22.61,207.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C67,253.3,38.43,237.19,22.61,207.89z"/>
  <path class="st1" d="M220.08,12.48h82.91c45.7,0,83.06,35.89,83.06,79.83c0,43.8-37.35,79.54-83.06,79.54h-35.45v76.76h-47.46
V12.48z M338.58,91.87c0-17.87-15.97-32.37-35.6-32.37h-35.45v65.33l35.45,0.15C322.61,125.13,338.58,110.18,338.58,91.87z"/>
  <path class="st1" d="M402.45,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C457.67,253.15,402.45,198.08,402.45,130.84z M600.06,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C566.36,205.11,600.06,171.56,600.06,130.55z"/>
  <path class="st1" d="M816.56,59.5h-58.01v189.11h-47.61V59.5h-58.15V12.48h163.77V59.5z"/>
  <path class="st1" d="M920.86,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C976.08,253.15,920.86,198.08,920.86,130.84z M1118.46,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C1084.77,205.11,1118.46,171.56,1118.46,130.55z"/>
  <path class="st1" d="M1244.73,59.21v47.61h81.45v47.31h-81.45v94.78h-47.46V11.89h142.38v47.31H1244.73z"/>
  <path class="st1" d="M197.81,536.98c0,34.86-25.05,71.63-73.68,71.63H34.92V372.48h64.45c41.89,0,68.55,30.76,68.55,62.55
c0,25.05-16.55,40.58-22.27,40.58C168.37,475.6,197.81,499.04,197.81,536.98z M82.23,418.62v46.14h19.19
c11.28,0,22.27-9.67,22.27-23.44c0-13.33-10.4-22.71-21.39-22.71H82.23z M151.52,533.61c0-13.62-9.38-27.25-31.93-27.25H82.23
v55.96h37.5C135.11,562.32,151.52,551.78,151.52,533.61z"/>
  <path class="st1" d="M347.22,608.61l-75.15-111.62v111.62h-47.46l-0.15-236.13h77.05c44.09,0,80.27,33.98,80.27,76.46
c0,30.32-18.31,56.84-43.65,65.77l67.09,93.9H347.22z M271.93,478.83l30.47,0.15c16.11,0.15,30.47-12.89,30.47-29.74
s-14.5-29.74-30.47-29.74h-30.47V478.83z"/>
  <path class="st1" d="M571.2,575.65h-94.48l-15.09,32.96h-51.27l112.79-241.99h1.46l112.94,241.99h-51.42L571.2,575.65z
 M552.74,535.22l-28.71-63.13l-28.86,63.13H552.74z"/>
  <path class="st1" d="M850.98,371.89v241.11h-2.2L708.6,476.63v132.28h-47.46V368.08h2.34l139.89,136.08V371.89H850.98z"/>
  <path class="st1" d="M1083.6,490.84c0,73.24-46.58,117.77-122.9,117.77H892V372.63l68.7-0.15
C1037.02,372.33,1083.6,417.16,1083.6,490.84z M1035.7,490.69c0-44.24-28.42-71.19-75.15-71.19h-21.24v141.8h21.68
C1007.43,561.3,1035.7,534.64,1035.7,490.69z"/>
  <path class="st1" d="M1102.06,567.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C1146.44,613.3,1117.88,597.19,1102.06,567.89z"/>
</g>
</svg>
</div>
</body>
</html>

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 !

Mauro Abrantes
  • 60
  • 8
  • Does this answer your question? [How to pause and resume CSS3 animation using JavaScript?](https://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript) – J4R Mar 12 '20 at 12:44

1 Answers1

1

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

  1. 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.

  2. 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.

NevNein
  • 487
  • 4
  • 14
  • After i posted this question i kept searching and saw that normally getElementsByClassName uses the [0]. I have to use the loop on the [0] and it should work ? – Mauro Abrantes Mar 12 '20 at 13:01
  • 1
    An HTMLCollection is something like an array (there are key differences though), so the [0] gets only the first element. You have to loop through the whole collection – NevNein Mar 12 '20 at 13:29
  • Im binding the event only in JS now and its not acessing ... i put a alert in the begging of the function and it never appears when i click it .... – Mauro Abrantes Mar 13 '20 at 14:41
  • nevermind ! i was loading the script in the header instead of loading it at the bottom of body ..... – Mauro Abrantes Mar 13 '20 at 15:10