0

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.

/* 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(&quot;#b1nka&quot;)" />
                                                                    </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(&quot;#b1nkb&quot;)" />
                                                                    </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>
Husna
  • 1,286
  • 4
  • 19
  • 48

1 Answers1

1

It looks like the problem is that you're getting the length of only the first element, and then using that length for ALL of them (and their lengths don't match). Perhaps you meant to do this: 

$(".iconStrokeAnim").each(function() {
  var l = this.getTotalLength();
  TweenMax.set(this, {strokeDasharray:l});
  TweenMax.fromTo(this, 3, {strokeDashoffset:l}, {strokeDashoffset:0});
});

Also keep in mind that there are a bunch of browser inconsistencies and bugs related to animating strokeDashoffset and calculating the length of SVG elements which GreenSock's DrawSVGPlugin solves, so you might want to consider that. It does require a Club GreenSock membership, but hopefully you'd find that worthwhile. With DrawSVGPlugin, your code could be simplified to: 

TweenMax.fromTo(".iconStrokeAnim", 4, {drawSVG:0}, {drawSVG:"100%"});

Here's a codepen: https://codepen.io/GreenSock/pen/83849013324fee131015c2b01633edf0?editors=0010

Happy tweening!

Jack
  • 2,930
  • 17
  • 13