Fix circuit animation in Firefox and for JS disabled

Existing animation does not work in FF -- the lines start with 0 extent, and snap suddenly into existence at the end of the animation period.

In addition to the Javascript animation logic for the lines, I noticed some static CSS animation code for them. Maybe this used to provide animation if JS was disabled? But currently that does not work either. I used this CSS as a starting point to make a cross-browser, CSS-only animation.

What's the real difference here that made it work cross-browser? The way the JS-based animation used to work was applying a CSS style.transition property to each SVG line element. My working theory is that using a full animation rule instead of just a transition was needed for FF, for some reason. After this change, it worked on FF, Chrome, and Safari (Mac OS tested). Not tested in Edge or IE, although Edge should be same as Chrome?

However, this change loses the uniformity of the JS animation. For stroke-dashoffset, percentages are (helpfully) relative to the viewport instead of relative to the total line length as you might expect. I guess this was why it was done in JS before, so that effectively each line could have its own individual keyframes such that all lines would start and finish animating all together. This is a great effect.

To get that effect back as a progressive enhancement for JS-enabled browsers, we can generate and assign keyframe animations dynamically to each line in a loop. This new JS is similar to the old code, but assigns style.animation instead of style.transition. The effect is now the same, but works in all browsers I could test -- and still gives an almost-as-nice effect even if JS is disabled.

oxidecomputer / design-site

Fix circuit animation in Firefox and for JS disabled #46