✋ Stop animation on last frame

alex-page · May 2, 2020 · 258d796 · 258d796
1 parent f7867ef
commit 258d796
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -122,5 +122,6 @@ const harmonograph = generateHarmonographSVG({
 
 ## Release History
 
+* v0.0.2  - ✋ Stop animation on last frame
 * v0.0.1  - 🎨 Background color documentation
 * v0.0.0  - 💥 Initial version
diff --git a/index.js b/index.js
@@ -139,7 +139,7 @@ const generateHarmonographSVG = userSettings => {
 			...animatePath
 		};
 
-		styleElement = 	h('style', null, `path{stroke-dasharray:${pathLength};stroke-dashoffset:${pathLength};animation:go ${animationSettings.duration} ${animationSettings.easing};}@keyframes go{from{stroke-dashoffset:${pathLength}}to{stroke-dashoffset:0;}}`);
+		styleElement = 	h('style', null, `path{stroke-dasharray:${pathLength};stroke-dashoffset:${pathLength};animation:go ${animationSettings.duration} ${animationSettings.easing};animation-fill-mode:forwards;}@keyframes go{from{stroke-dashoffset:${pathLength}}to{stroke-dashoffset:0;}}`);
 	}
 
 	const backgroundColorElement = backgroundColor === 'transparent' ?

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@harmonograph/svg",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "👩‍🎨 Draw and animate a harmonograph in SVG",
 	"scripts": {
 		"test": "ava && xo"

diff --git a/test.js b/test.js
@@ -43,7 +43,7 @@ test('harmongraph: add animation style', t => {
 		{
 			amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001
 		}]
-	}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><style>path{stroke-dasharray:4356.1940753609;stroke-dashoffset:4356.1940753609;animation:go 2000ms linear;}@keyframes go{from{stroke-dashoffset:4356.1940753609}to{stroke-dashoffset:0;}}</style><path stroke="#000" stroke-width="1" fill="none" d="M 679.068 646.723 C 646.36 628.881, 417.218 495.899, 249.676 392.849 S -28.969 212.083, 9.448 201.383 229.928 241.52, 402.486 287.403 712.231 363.501, 699.031 350.759 524.344 287.226, 350.469 262.826 16.412 251.089, 4.27 315.364 129.74 490.425, 301.232 560.133 652.343 645.958, 689.393 576.041 615.481 354.027, 450.006 221.669 89.434 -8.64, 28.434 0.66 49.576 125.994, 205.543 266.677"></path></svg>');
+	}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><style>path{stroke-dasharray:4356.1940753609;stroke-dashoffset:4356.1940753609;animation:go 2000ms linear;animation-fill-mode:forwards;}@keyframes go{from{stroke-dashoffset:4356.1940753609}to{stroke-dashoffset:0;}}</style><path stroke="#000" stroke-width="1" fill="none" d="M 679.068 646.723 C 646.36 628.881, 417.218 495.899, 249.676 392.849 S -28.969 212.083, 9.448 201.383 229.928 241.52, 402.486 287.403 712.231 363.501, 699.031 350.759 524.344 287.226, 350.469 262.826 16.412 251.089, 4.27 315.364 129.74 490.425, 301.232 560.133 652.343 645.958, 689.393 576.041 615.481 354.027, 450.006 221.669 89.434 -8.64, 28.434 0.66 49.576 125.994, 205.543 266.677"></path></svg>');
 });
 
 test('harmongraph: does not render path', t => {
@@ -59,5 +59,5 @@ test('harmongraph: does not render path', t => {
 		}, {
 			amplitude: 200, frequency: 2.989, phase: 0.318, damping: 0.002
 		}]
-	}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><style>path{stroke-dasharray:4783.133409840435;stroke-dashoffset:4783.133409840435;animation:go 15000ms linear;}@keyframes go{from{stroke-dashoffset:4783.133409840435}to{stroke-dashoffset:0;}}</style><path stroke="#000" stroke-width="1" fill="none" d="M 600.113 582.891 C 535.913 641.508, 282.793 708.3, 232.551 596.842 S 270.976 272.733, 329.776 136.891 369.993 -37.831, 267.893 52.586 23.756 349.231, 44.498 498.606 260.334 718.333, 443.201 650.975 740.714 388.621, 681.372 229.271 419.898 -30.114, 311.056 12.711 216.071 234.781, 280.238 400.331 406.134 693.122, 344.792 675.722 116.703 498.953, 59.736 331.111 94.919 11.929, 271.977 3.604"></path></svg>');
+	}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><style>path{stroke-dasharray:4783.133409840435;stroke-dashoffset:4783.133409840435;animation:go 15000ms linear;animation-fill-mode:forwards;}@keyframes go{from{stroke-dashoffset:4783.133409840435}to{stroke-dashoffset:0;}}</style><path stroke="#000" stroke-width="1" fill="none" d="M 600.113 582.891 C 535.913 641.508, 282.793 708.3, 232.551 596.842 S 270.976 272.733, 329.776 136.891 369.993 -37.831, 267.893 52.586 23.756 349.231, 44.498 498.606 260.334 718.333, 443.201 650.975 740.714 388.621, 681.372 229.271 419.898 -30.114, 311.056 12.711 216.071 234.781, 280.238 400.331 406.134 693.122, 344.792 675.722 116.703 498.953, 59.736 331.111 94.919 11.929, 271.977 3.604"></path></svg>');
 });