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
Hello,
I have a SVG that contains small paths and long paths.
I then loop through all paths, and try to create an animejs timeline. I make it so if the paths are very small (under 70 units totaldistance), I set the duration of animation to 1. (I want the small paths to instantly appear).
If the paths are longer, I want to see the stroke dash animation.
The problem is that sometimes it skips that last 4 paths. I am checking the timeline.add begin event, and it's not triggered sometimes (for the last paths). Sometimes it is. I do 10 page refreshes, 3 times it works, 7 times it does not work.
If I increase duration to 10 for example (for the small length paths), it always works, then they are drawn (but I want them to instantly appear, so that's why I use duration 1).
What can cause this bug?
var durationz;
for (let i = 0; i < paths.length; i++)
{
paths[i].setAttribute("stroke", color);
paths[i].setAttribute("stroke-linecap", "round");
paths[i].setAttribute("stroke-miterlimit", "15");
paths[i].setAttribute("stroke-width", "0");
paths[i].setAttribute("fill", "none");
}
for (let i = 0; i < paths.length; i++)
{
var min_length=70;
durationz =Math.floor(Math.max(paths[i].getTotalLength()/2,min_length)/$("#speed").val());
if(paths[i].getTotalLength()<min_length)
durationz=1;
console.log(paths[i]);
tl=tl.add({
duration:durationz,
targets:paths[i],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'linear',
update: function(anim) {
},
begin: function(anim) {
var path_get=anim.animatables[0].target ;
console.log(path_get);
paths[i].setAttribute("stroke-width", "15");
}
})
}
The strange thing is that it always happens with the last paths and only if the last paths are small in length. Else, they appear correctly. (at least this is what I noticed).
Here are 2 example paths that are not shown when animating with timeline
The text was updated successfully, but these errors were encountered:
Hello,
I have a SVG that contains small paths and long paths.
I then loop through all paths, and try to create an animejs timeline. I make it so if the paths are very small (under 70 units totaldistance), I set the duration of animation to 1. (I want the small paths to instantly appear).
If the paths are longer, I want to see the stroke dash animation.
The problem is that sometimes it skips that last 4 paths. I am checking the timeline.add begin event, and it's not triggered sometimes (for the last paths). Sometimes it is. I do 10 page refreshes, 3 times it works, 7 times it does not work.
If I increase duration to 10 for example (for the small length paths), it always works, then they are drawn (but I want them to instantly appear, so that's why I use duration 1).
What can cause this bug?
The strange thing is that it always happens with the last paths and only if the last paths are small in length. Else, they appear correctly. (at least this is what I noticed).
Here are 2 example paths that are not shown when animating with timeline
The text was updated successfully, but these errors were encountered: