Hexagon Page Animations

The blog post from Red Blob Games discusses the evolution of hexagon page animations, detailing the author's experiences with different animation techniques over the years. Initially, in 2013, the author used d3.js for animations but faced challenges with CSS transitions in SVG. The solution involved using JavaScript to rotate both the grid and the text, ensuring the text remained upright. In 2018, the author transitioned to Vue and implemented a new animation system that optimized performance by limiting animations to visible diagrams. Despite the introduction of the SVG2 feature "vector-effect: non-rotation" in 2016, it was found to be unsupported in major browsers. The author then decided to explore CSS transitions, which are easier to implement and more efficient than JavaScript transitions. The post outlines the steps taken to refactor the code, including switching from inline styles to classes and adding CSS transition rules. A bug in Safari was encountered, where animations would only play when elements became visible, prompting the use of IntersectionObserver to trigger animations appropriately. The author expresses satisfaction with the simplification of the implementation and hopes for smoother animations across devices.

- The author has evolved hexagon animations from d3.js to Vue, improving performance and usability.

- CSS transitions were chosen for their efficiency and ease of programming compared to JavaScript transitions.

- The "vector-effect: non-rotation" feature in SVG2 remains unsupported in major browsers.

- A bug in Safari required the use of IntersectionObserver to manage animation visibility.

- The implementation has been simplified, aiming for smoother animations on various devices.