diff --git a/assets/blocks/animating-a-pirate-treasure-map-path.html b/assets/blocks/animating-a-pirate-treasure-map-path.html index 8d3cde29..f6879185 100644 --- a/assets/blocks/animating-a-pirate-treasure-map-path.html +++ b/assets/blocks/animating-a-pirate-treasure-map-path.html @@ -57,34 +57,34 @@ var lineLength = line.getTotalLength(); var numDashes = 14; -function animate(event) { +function animate(el, transitionFn = "ease") { + el.style.strokeDashoffset = lineLength; + el.style.strokeDasharray = lineLength; + + setTimeout(() => { + el.style["transition-duration"] = "3s"; + el.style["transition-property"] = "stroke-dashoffset"; + el.style["transition-timing-function"] = transitionFn; + el.style.strokeDashoffset = 0; + }, 10); +} + +function handleClick(event) { var button = event.target; reset(); if (button.value === "continuous-line") { - animatedLine.style.strokeDashoffset = lineLength; - animatedLine.style.strokeDasharray = lineLength; - setTimeout(() => { - animatedLine.style["transition-duration"] = "3s"; - animatedLine.style["transition-property"] = "stroke-dashoffset"; - animatedLine.style.strokeDashoffset = 0; - }, 10); - } else { // "continuous-dashes" and "dash-by-dash" + animate(animatedLine); + } else { + // Make line dashed animatedLine.style.strokeDasharray = lineLength / (numDashes * 2 - 1); - animatedLineMask.style.strokeDashoffset = lineLength; - animatedLineMask.style.strokeDasharray = lineLength; - setTimeout(() => { - animatedLineMask.style["transition-duration"] = "3s"; - animatedLineMask.style["transition-property"] = "stroke-dashoffset"; - - if (button.value === "dash-by-dash") { - animatedLineMask.style["transition-timing-function"] = `steps(${numDashes}, jump-start)`; - } - - animatedLineMask.style.strokeDashoffset = 0; - }, 10); + var transitionFn; + if (button.value === "dash-by-dash") { + transitionFn = `steps(${numDashes}, jump-start)`; + } + animate(animatedLineMask, transitionFn); } } @@ -95,6 +95,6 @@ animatedLineMask.style["transition-property"] = "none"; } -document.querySelector(".controls").addEventListener("click", animate); +document.querySelector(".controls").addEventListener("click", handleClick);