Is it possible to make a SVG Animation with progress ring but both right and left dashoff set moving?

user_19188610 0
Viewed 102

So I have in my codepen something like this and I'm using gsap if everyone doesn't know that fine..just think about the dashoffset and the dasharray in svg circulation path.

You can see this in codepen which is premium in our group but I can't afford it so I want to break down the possibility that I can do this with two dashoffset but it doesn't work as I wanted to. Here is the codepen that make it works vs the code that I do. WORKING vs 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 believe there is something more in this code or is not to make two variation of dasharray animated in both direction or not? If not just say the possible way to do it. Thanks for any response.

gsap animation svg javascript
1 Answers

Here is the pure SVG (only SVG attributes) version. The pathLength is 100 and the first value in the dasharray is therefore a number between 0 and 100. The "starting point" for the path is at 6 o'clock after I have rotated the circle. The offset value is now -(100 - value) / 2.

let c1 = document.getElementById('c1');
document.forms.form01.range.addEventListener('change', e => {
  let value = parseInt(e.target.value);
  c1.setAttribute('stroke-dasharray', `${e.target.value} 100`);
  c1.setAttribute('stroke-dashoffset', `-${(100 - value) / 2}`);
});
<form name="form01">
  <input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
  <circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)" stroke-dasharray="50 100" stroke-dashoffset="-25" pathLength="100" />
</svg>

And the animated CSS version looks like this:

circle#c1 {
  stroke-dasharray: 0 100;
  stroke-dashoffset: -50;
  animation: animateCircle 4s forwards linear;
}

@keyframes animateCircle {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: -50;
  }
  100% {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
  }
}
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
  <circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)"  pathLength="100" />
</svg>

user_3220840
Related