diff --git a/ternary-clock/ternary-clock.css b/ternary-clock/ternary-clock.css index 2875f27..823464f 100644 --- a/ternary-clock/ternary-clock.css +++ b/ternary-clock/ternary-clock.css @@ -13,5 +13,6 @@ path { color: white; border: 1px solid black; - transition: all 500ms; -} \ No newline at end of file + transition: fill-opacity 500ms; + transition: transform 500ms; +} diff --git a/ternary-clock/ternary-clock.js b/ternary-clock/ternary-clock.js index 7716b8f..5fc5a13 100644 --- a/ternary-clock/ternary-clock.js +++ b/ternary-clock/ternary-clock.js @@ -280,23 +280,52 @@ function pulseCell(type, time) { let deets = current.getBoundingClientRect(); let centerX = (deets.x + (deets.width / 2)) - box.x; let centerY = (deets.y + (deets.height / 2)) - box.y; + current.style.transformOrigin = `${centerX}px ${centerY}px` + + const keyframes = [ + {transform: "scale(1)"}, + {tranform: "scale(.95)"}, + {transform: "scale(1)"} + ]; + + const timing = { + duration: 500, + iterations: 1, + }; + + setTimeout(function() { + current.animate([ + {transform: "scale(1)", fillOpacity: "1"}, + {transform: "scale(.95)", fillOpacity: ".75"}, + {transform: "scale(1)", fillOpacity: "1"} + ], timing); + }, 100) + + /*current.animate([ + {transform: "scale(1)", fillOpacity: "1"}, + {transform: "scale(.95)", fillOpacity: ".75"}, + {transform: "scale(1)", fillOpacity: "1"} + ], timing);*/ + // //transform-origin applies to the bounding box of the element, // and getBoundingClientRect gets pixels relative to viewport, // so to make them work, we have to do some funky looking math: // the origin is px from left edge to box + px to center of box - distance from left edge to SVG // and px from top edge to box + px to center of box - distance from top edge to SVG - current.style.transformOrigin = `${centerX}px ${centerY}px`; + /*current.style.transformOrigin = `${centerX}px ${centerY}px`; setTimeout(function() { current.style.transform = "scale(.95)"; }, 100); setTimeout(function() { current.style.transform = "scale(1)"; - }, 700); + }, 700);*/ } + + let svgBox = document.getElementById("svgBox"); let box = getElementSize(svgBox); //let box = getSVGsize();