Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Timeline does not draw all paths (stoke dash effect) #884

Open
sodevrom opened this issue Feb 15, 2024 · 1 comment
Open

Timeline does not draw all paths (stoke dash effect) #884

sodevrom opened this issue Feb 15, 2024 · 1 comment

Comments

@sodevrom
Copy link

sodevrom commented Feb 15, 2024

Hello,
I have a SVG that contains small paths and long paths.
catsvg

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
image

@sodevrom
Copy link
Author

Doing further testing, even if you use this simple svg, it does not always work:
<svg xmlns="http://www.w3.org/2000/svg" width="1603" height="1002" class="anim_paths"><path d="M952 143L983 142" stroke="#000000" fill="none" stroke-linecap="round" stroke-miterlimit="15" stroke-width="0" stroke-dasharray="31.016124725341797" style="stroke-dashoffset: 0px;"></path><path d="M881 194L882 211" stroke="#000000" fill="none" stroke-linecap="round" stroke-miterlimit="15" stroke-dasharray="17.029386520385742" style="stroke-dashoffset: 0px;" stroke-width="0"></path><path d="M808 146L832 146" stroke="#000000" fill="none" stroke-linecap="round" stroke-miterlimit="15" stroke-dasharray="24" style="stroke-dashoffset: 0px;" stroke-width="0"></path><path d="M837 175L819 189" stroke="#000000" fill="none" stroke-linecap="round" stroke-miterlimit="0" stroke-dasharray="22.803508758544922" style="stroke-dashoffset: 0px;" stroke-width="0"></path></svg>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant