Currently using gsap, I am attempting to create a stroke animation on an SVG icon. However, I am encountering an issue where only half of the complete SVG is being displayed instead of the entire icon. I have adjusted the strokeDashoffset attribute and believe it may be related to the getTotalLength() function. Can someone offer assistance with resolving this problem?
/* 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
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="61" viewBox="0 0 59 61">
<defs>
<clipPath id="b1nka">
<path fill="#fff" d="M0 42.385h31.23V37.18H0z" />
</clipPath>
<clipPath id="b1nkb">
<path fill="#fff" d="M28.255 0h5.942v4.465h4.465v5.942h-4.465v4.465h-5.942v-4.465H23.79V4.465h4.465z" />
</clipPath>
</defs>
<g>
<g>
<g />
<g>
<g>
<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" />
</g>
<g>
<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" />
</g>
<g transform="rotate(90 16 52)">
<path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="2" d="M8.18 40.15v0h14.872v23.795H8.18v0" />
</g>
<g>
<path fill="none" class="iconStrokeAnim" stroke="#1c65fc" stroke-miterlimit="50" stroke-width="4" d="M0 42.385v0h31.23v0-5.205 0H0v0z" clip-path="url("#b1nka")" />
</g>
<g>
<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("#b1nkb")" />
</g>
<g>
<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" />
</g>
<g>
<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" />
</g>
</g>
</g>
</g>
</svg>