title: GSAP stroke animation strokeDashoffset not working properly
body: <p>I'm working with gsap here I'm trying to do stroke animation I got it. but the problem is complete SVG is not coming half icon is coming I tried changing strokeDashoffset it might be an issue with the getTotalLength(); Can anyone help me out this problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Icon Stroke Animation */
  var path = document.getElementsByClassName('iconStrokeAnim');
  var l = $(".iconStrokeAnim").get(0).getTotalLength();
  TweenMax.set(path, {
    strokeDasharray: l
  });
  TweenMax.fromTo(path, 3, {
    strokeDashoffset: l
  }, {
    strokeDashoffset: 0
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" width="59" height="61" viewBox="0 0 59 61"&gt;
                                                          &lt;defs&gt;
                                                              &lt;clipPath id="b1nka"&gt;
                                                                  &lt;path fill="#fff" d="M0 42.385h31.23V37.18H0z" /&gt;
                                                              &lt;/clipPath&gt;
                                                              &lt;clipPath id="b1nkb"&gt;
                                                                  &lt;path fill="#fff" d="M28.255 0h5.942v4.465h4.465v5.942h-4.465v4.465h-5.942v-4.465H23.79V4.465h4.465z" /&gt;
                                                              &lt;/clipPath&gt;
                                                          &lt;/defs&gt;
                                                          &lt;g&gt;
                                                              &lt;g&gt;
                                                                  &lt;g /&gt;
                                                                  &lt;g&gt;
                                                                      &lt;g&gt;
                                                                          &lt;path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M19.336 23.048a3.718 3.718 0 1 1-7.435 0 3.718 3.718 0 0 1 7.435 0z" /&gt;
                                                                      &lt;/g&gt;
                                                                      &lt;g&gt;
                                                                          &lt;path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M52.796 16.358a3.718 3.718 0 1 1-7.435 0 3.718 3.718 0 0 1 7.435 0z" /&gt;
                                                                      &lt;/g&gt;
                                                                      &lt;g transform="rotate(90 16 52)"&gt;
                                                                          &lt;path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M8.18 40.15v0h14.872v23.795H8.18v0" /&gt;
                                                                      &lt;/g&gt;
                                                                      &lt;g&gt;
                                                                          &lt;path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="4" d="M0 42.385v0h31.23v0-5.205 0H0v0z" clip-path="url(&amp;quot;#b1nka&amp;quot;)" /&gt;
                                                                      &lt;/g&gt;
                                                                      &lt;g&gt;
                                                                          &lt;path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="4" d="M28.255 0h5.942v4.465h4.465v5.942h-4.465v4.465h-5.942v-4.465H23.79V4.465h4.465z" clip-path="url(&amp;quot;#b1nkb&amp;quot;)" /&gt;
                                                                      &lt;/g&gt;
                                                                      &lt;g&gt;
                                                                          &lt;path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M23.296 30.349c.721 1.69 1.984 7.574 1.984 7.574H6.69s1.262-5.884 1.983-7.574c.7-1.642 4.187-1.333 7.312-1.314 3.125-.019 6.61-.328 7.311 1.314z" /&gt;
                                                                      &lt;/g&gt;
                                                                      &lt;g&gt;
                                                                          &lt;path fill="none"  stroke="#1c65fc" class="iconStrokeAnim" stroke-linejoin="round" stroke-miterlimit="50" stroke-width="2" d="M44.946 23.69c-3.108 1.113-5.536 3.66-5.536 7.64v6.819c0 1.004.463 1.665 1.056 1.971.25.129.518.193.785.193.266 0 .535-.064.785-.193.593-.306 1.055-.967 1.055-1.971V31.33c0-.586.171-1.125.45-1.6.109-.185.234-.36.372-.526V57.25c0 1.049.514 1.734 1.172 2.046.267.127.267.19.838.19.57 0 .57-.063.837-.19.659-.312 1.173-.997 1.173-2.046l.235-13.997c.204-.161.377-.25.53-.255h.007v0h.006c.147 0 .319.08.53.252l.237 13.963a.377.377 0 0 0-.001.037c0 1.049.515 1.734 1.172 2.046a1.956 1.956 0 0 0 1.675 0c.659-.312 1.173-.997 1.173-2.046V29.205c.137.165.263.341.371.526.28.475.45 1.014.45 1.6v6.818c0 1.004.464 1.665 1.056 1.971.25.129.519.193.785.193.267 0 .535-.064.785-.193.593-.306 1.056-.967 1.056-1.971V31.33c0-3.981-2.428-6.528-5.536-7.641a11.212 11.212 0 0 0-3.76-.64 11.21 11.21 0 0 0-3.758.64z" /&gt;
                                                                      &lt;/g&gt;
                                                                  &lt;/g&gt;
                                                              &lt;/g&gt;
                                                          &lt;/g&gt;
                                                      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>