Currently in my codepen, I am working on a project where I am using GSAP. If you are unfamiliar with that, no worries - just focus on the dashoffset and dasharray in the SVG circulation path.
You can find this project in Codepen which is part of our premium group. Unfortunately, I cannot afford it so I am exploring the possibility of achieving the desired effect with two dashoffsets. However, it is not working as expected. Here is the comparison between the working version WORKING and the one I created NOT WORKING PROPERLY.
.circle-container__progress {
fill: none;
stroke-linecap: round;
stroke: var(--completion-color);
stroke-dasharray: 100 100;
stroke-linecap: square;
stroke-width: var(--circle-border-width);
/* // For animations...
// transition: stroke-dashoffset 1s ease-in-out;
// will-change: transform; */
}
I suspect there might be something missing in the code or perhaps it's not feasible to animate two variations of dasharray in both directions simultaneously. If that's the case, please suggest any possible alternatives. Thank you for any input.