You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When play the animation - the SVG Paths are being drawn & filled (I use color array to fill my SVG paths).
However, when restarting the animation, the SVG fill is not restarting, the Paths are already filled and only the stroke is animating. What should I do in order to change it and re-stroke& re-fill?
The text was updated successfully, but these errors were encountered:
shir0206
changed the title
Animate the Fill in SVG Path - When restart animation - Is there a way to restart The Path FILL?
Animate the Fill in SVG Path - When restart animation - Is there a way to restart the Path FILL?
May 26, 2020
I don't know if you've updated the linked project since opening this issue, but I can't reproduce the problem in Firefox or Chromium. Both the stroke and the fill are animating on restart, as expected.
When play the animation - the SVG Paths are being drawn & filled (I use color array to fill my SVG paths).
However, when restarting the animation, the SVG fill is not restarting, the Paths are already filled and only the stroke is animating. What should I do in order to change it and re-stroke& re-fill?
function animation() {
anime({
targets: "svg path",
strokeDashoffset: [anime.setDashoffset, 0],
easing: "cubicBezier(.5, .05, .1, .3)",
duration: 200,
delay: function (el, i) {
return i * 50 + 1500;
},
loop: false,
direction: "alternate",
autoplay: true,
fill: function (el, i) {
return colors[colors.lenght - 1- i];
},
});
}
EXAMPLE:
https://codesandbox.io/s/intelligent-banach-9pufd?file=/src/App.js
The text was updated successfully, but these errors were encountered: