From 258d796826fefa23b14db939f2996cdce646d088 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Fri, 1 May 2020 22:51:08 -0400 Subject: [PATCH] =?UTF-8?q?=E2=9C=8B=20Stop=20animation=20on=20last=20fram?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + index.js | 2 +- package.json | 2 +- test.js | 4 ++-- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 4661c05..d117935 100644 --- 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 index aafe547..778acba 100644 --- 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 index 45fc1df..ed7bf34 100644 --- 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 index 8d12c49..7c747b7 100644 --- 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 }] - }), ''); + }), ''); }); 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 }] - }), ''); + }), ''); });