allow overriding animation duration/delay with CSS variables

chrisburnell · Jan 21, 2024 · 85217c6 · 85217c6
1 parent a675b6a
commit 85217c6
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chrisburnell/svg-sparkline",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A Web Component for building an SVG Sparkline.",
   "main": "svg-sparkline.js",
   "scripts": {

diff --git a/svg-sparkline.js b/svg-sparkline.js
@@ -32,13 +32,12 @@ class SVGSparkline extends HTMLElement {
       :host([animate]) {
         svg:first-of-type {
           clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
-          transition: transform var(--animation-duration, 1s) var(--transition-function);
-          animation: swipe calc(2 * var(--animation-duration, 1s)) linear var(--animation-duration, 1s) forwards;
+          animation: swipe var(--animation-duration-override, var(--animation-duration, 1s)) linear var(--animation-delay, var(--animation-duration-override, var(--animation-duration, 1s))) forwards;
         }
         svg:last-of-type,
         span {
           opacity: 0;
-          animation: fadein var(--animation-duration, 1s) linear calc(2 * var(--animation-duration, 1s) + var(--animation-duration, 1s)) forwards;
+          animation: fadein var(--animation-duration-override, var(--animation-duration, 1s)) linear calc(2 * var(--animation-delay, var(--animation-duration-override, var(--animation-duration, 1s)))) forwards;
         }
       }
     }