title: How to animate a hidden element with anime.js
body: <p>I would like an element to appear along with an animation from anime.js when a click is triggered.</p>
  
  <p>That means the element should be initially hidden or with opacity = 0. </p>
  
  <p>I have attached a demo below. The element is not hidden, as I don't know how to change it from hidden to visible with anime.js while the drawline animation takes place.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var lineDrawing = anime({
    targets: 'polyline',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutCubic',
    duration: 1000,
    autoplay: false
  });
  
  document.querySelector('.play-drawing').onclick = lineDrawing.restart;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div id="anime-demo"&gt;
    &lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:none;stroke:#03a9f4;stroke-miterlimit:10;stroke-width:2px;}&lt;/style&gt;&lt;/defs&gt;
      &lt;polyline class="cls-1" points="100 0 0 0 0 100 100 100 100 40"/&gt;&lt;/svg&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div &gt;
  &lt;button class="play-drawing"&gt;Draw the Anchor&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a demo in the following snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var lineDrawing = anime({
    targets: 'polyline',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutCubic',
    duration: 1000,
    autoplay: false
  });
  
  document.querySelector('.play-drawing').onclick = lineDrawing.restart;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 20px;
    font-family: 'Lato';
    font-weight: 300;
    font-size: 1.2em;
  }
  
  .container{
    width:30%;
  }
  #anime-demo {
    position: relative;
  }
  
  svg {
     padding: 10px;
     position:relative;
     top:0px;
  }
  
  button {
    background: orange;
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Lato';
    cursor: pointer;
    border: none;
    outline: none;
  }
  
  button:hover {
    background: blue;
  }
  .text{
    width:80%;
    padding-left:10%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
  
  &lt;div id="anime-demo"&gt;
    &lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"&gt;&lt;defs&gt;&lt;style&gt;.cls-1{fill:none;stroke:#03a9f4;stroke-miterlimit:10;stroke-width:2px;}&lt;/style&gt;&lt;/defs&gt;
      &lt;polyline class="cls-1" points="100 0 0 0 0 100 100 100 100 40"/&gt;&lt;/svg&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div &gt;
  &lt;button class="play-drawing"&gt;Draw the Anchor&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>