For 1808-hex-half-directions I experimented with SVG animation using CSS transitions. On Twitter, @jonikorpi recommended wrapping each element in a div[1] for better performance. Eww! I remember reading that page[2] years ago but it hadn't sunk in. I decided to try it here.
Version 1 rotated and translated each hexagon individually. It's the only version that worked correctly in Safari. And it was also the easiest to implement. IE/Edge does not yet support CSS transforms on SVG elements, but it is preview status and should be released in April 2018.
Version 2 rotates the entire grid and then unrotates the text. This looks smoother because it rotates the entire grid instead of sliding each individual hex. Unfortunately the unrotation doesn't work in Safari; I filed a bug[3] but don't expect it to be fixed anytime soon.
Version 3 has a separate group for the hexagons, which are rotated, and the labels, which slide. If you look carefully, the slide animation doesn't look as nice as one above, where the hexagons and labels move together.
Version 4 has one SVG for the hexagons, which is rotated, and one SVG for the labels, which slide. Since the entire SVG is being rotated, it should be able to take advantage of GPU acceleration. But the labels are not top-level elements so they are animated on the CPU.
Version 5 makes each label a top level element for GPU acceleration. Unfortunately all the automatic sizing that the browser gives me for SVGs goes out the window, and I need to manually position and resize everything. The labels don't line up here because I didn't get that positioning correct. One downside: all the text was fuzzy in Safari.
This is the fastest animation but it's the most work, and it feels laggy when scrolling. I don't think it's worth it for the hexagon page, where the animation is brief, and it's not impacting the user interaction. I think I'll use version 1 for the hex page. I may make a different decision on other pages.