Issue with GSAP strokeDashoffset animation not functioning correctly

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(&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>

Answer №1

It appears that the issue lies in determining the length of only the initial element and then applying that same length to all elements (even though their lengths vary). Maybe you intended to implement the following code:

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

Additionally, it is worth noting that there are numerous browser inconsistencies and bugs associated with animating strokeDashoffset and calculating SVG element lengths. GreenSock's DrawSVGPlugin effectively addresses these issues, so it might be beneficial to consider utilizing it. While a Club GreenSock membership is required for DrawSVGPlugin, the benefits may outweigh the cost. With DrawSVGPlugin, your code could simply be reduced to:

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

Check out this CodePen example for reference: https://codepen.io/GreenSock/pen/83849013324fee131015c2b01633edf0?editors=0010

Enjoy enhancing your animations!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for extending the dropdown of a fixed width select box to the left rather than the right?

Here is the code snippet I'm currently working with: http://jsfiddle.net/9pyh2/ <style type="text/css> select {width:200px;} </style> <form> <select><option value="">Choose one</option> <option>F ...

CSS is altering the background color to a slightly modified tint from its original shade

After uploading a high-definition image as a background, I noticed that in the DOM the file appeared to have a slightly greener tint than the original. However, upon inspecting the image background element and saving it again, it saved with the original ti ...

How can I adjust the alignment of the text in a select menu in jQuery Mobile?

Exploring the world of jquery for the first time, I am excited about building a mobile web application. Utilizing jquery mobile (1.4.5), I encountered a simple issue - I couldn't figure out how to change the location of the text in the select menu. De ...

Limits in exporting data from an html table to a pdf document

The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...

What is the best way to line up three divs horizontally and center the contents inside each one?

I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left a ...

Ways to adjust the location of the scrollbar using CSS

Can the position of the scroll bar be modified using CSS to switch it from left to right or from bottom to top? ...

Is it possible to mask the variant box lines on my product pages by utilizing the Shopify Lite Buy Button?

I am trying to integrate a vertical, full-width button into my Squarespace product page. My goal is to only display the images and hide all other elements such as the product title, price, and description by setting their display property to "none". Howev ...

Tips for creating an element that maintains its dimensions when a border is added during a hover effect

One issue I often face is the desire to add a border to an element on hover, only to find that as the border appears, the element's height and width change, causing it to visually jump and potentially push other elements. Is there a solution for this ...

Create a Bootstrap div containing a button that adjusts to different screen sizes on the

Struggling with an issue in Bootstrap on how to create an input group with responsive content and a button on the right side. I want the button to always be on the right side and also responsive. I attempted to achieve this with the code below, but it does ...

Tips on altering hover effects?

I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work. If anyone has any simple links related to this topic, I would greatly appre ...

"Adding a class with jQuery on a selected tab and removing it when another tab is clicked

I have 3 different tabs named Monthly, Bi-monthly, and Weekly. The user can set one of these as their default payroll period, causing that tab to become active. I was able to achieve this functionality by utilizing the following code within the <script& ...

Is it possible to change the color of a hyperlink without assigning it a class?

Here is the CSS code I am using: .menu_2_1 ul { float:left; list-style-type:none; } .menu_2_1 ul li { float:left; display:inline-block; width:auto; height:55px; margin-left:20px; padding-top:25px; } .menu_2_1 ul li a:link, ...

Tips for ensuring uniform button height across all cards

I am seeking advice on how to align all the buttons in different cards, despite varying text lengths, to be in the same position at the end of each card. Here is an example of what I am aiming for. Below is my HTML and CSS code: * { margin: 0px; pad ...

Unable to Render CSS After Submitting a Post with Express

Upon initially loading the page, I was successful in getting the CSS to load. However, when I submit data using POST with a button, the post functionality works fine but the CSS fails to load. As a result, the screen appears plain with only the post inform ...

What is the best way to start tiny-slider automatically once the video has ended?

I am currently using the tns-slider plugin and have a setup with 3 slides (2 photos and 1 video). <div class='tiny-slider'> <div class='slide slide1'> <div class='video-slide'> <video id=&qu ...

What is the process for spinning a span in the center of an image?

My canvas displays an image: https://i.sstatic.net/p3MV4.png There is a white square with a refresh icon on the right side of the image, slightly hidden by a black circle. I implemented it like this: var rotatorSpan = document.createElement("span"); rot ...

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

CSS selector for the element that does not have any class or attribute assigned

Is there a way to create a CSS selector that targets an element with no attributes or class names? I have a scenario where I need to select the second div (which has no classes) from HTML containing multiple nested divs with dynamic class names. <div cl ...

Achieving a Transparent Flash overlay on a website without hindering its usability (attention, interaction, form submissions, etc.)

Currently, we are attempting to overlay a transparent flash on top of an iframe which loads external websites. Is there a method to configure the page in a way that allows the transparent flash to be displayed while still allowing interaction with the und ...

Does setting white-space:nowrap enlarge the div?

My CSS code for div .name sets the width to 75% to truncate text if it doesn't fit. However, resizing the window causes the text to remain the same size and my entire website structure falls apart. This is the HTML code snippet: <tr> <t ...