Hexagon Page Animations
The blog post outlines the transition from d3.js to CSS transitions for hexagon animations, highlighting improved efficiency, reduced updates, and a workaround for Safari bugs to enhance performance across devices.
Read original article
The blog post discusses the evolution of hexagon animations on the Red Blob Games website, detailing the transition from using d3.js for animations to implementing CSS transitions. Initially, the author faced challenges with CSS transitions in SVG, opting for JavaScript transitions that required extensive updates for each animation frame. In 2018, a rewrite using Vue allowed for a more efficient approach, but limitations in browser support for the SVG feature "vector-effect: non-rotation" hindered progress. With advancements in browser capabilities, the author revisited CSS transitions, finding them easier to implement and more efficient than JavaScript. The new method significantly reduced the number of HTML updates required for animations. The author also addressed a bug in Safari that delayed animations for off-screen elements by using IntersectionObserver to trigger animations only for visible elements. The post concludes with the author's hope that the new implementation will enhance animation performance across devices.
- The author transitioned from d3.js to CSS transitions for hexagon animations.
- Initial challenges included browser support issues and the inefficiency of JavaScript transitions.
- CSS transitions were found to be easier and more efficient, reducing the number of updates needed.
- A workaround for a Safari bug was implemented using IntersectionObserver.
- The author aims for smoother animations across various devices with the new implementation.
Related
SVG Triangle of Compromise
The article explores SVG (Scalable Vector Graphics) on the web, highlighting its stylability, cacheability, and dimensionality, while discussing advantages and challenges in web design and performance considerations.
Can you convert a video to pure CSS?
The article explores converting video content into CSS animations, highlighting browser compatibility issues, particularly with Safari, and suggesting JavaScript alternatives for cross-browser functionality while detailing performance differences.
CSS @property and the New Style
The CSS @property at-rule now supports custom properties, enhancing animated gradients and transitions. It offers techniques for hover effects and shiny borders, with resources for further exploration provided.
How I Built My Blog
Josh W. Comeau has rebuilt his blog with a new tech stack, including Next.js and MDX, involving over 100,000 lines of code, while enhancing user experience and styling with Linaria.
Hexagon Page Animations
The blog post details the author's evolution of hexagon animations from d3.js to Vue, highlighting improved performance, the adoption of CSS transitions, and solutions for browser compatibility and animation visibility issues.
0 commentsRelated
SVG Triangle of Compromise
The article explores SVG (Scalable Vector Graphics) on the web, highlighting its stylability, cacheability, and dimensionality, while discussing advantages and challenges in web design and performance considerations.
Can you convert a video to pure CSS?
The article explores converting video content into CSS animations, highlighting browser compatibility issues, particularly with Safari, and suggesting JavaScript alternatives for cross-browser functionality while detailing performance differences.
CSS @property and the New Style
The CSS @property at-rule now supports custom properties, enhancing animated gradients and transitions. It offers techniques for hover effects and shiny borders, with resources for further exploration provided.
How I Built My Blog
Josh W. Comeau has rebuilt his blog with a new tech stack, including Next.js and MDX, involving over 100,000 lines of code, while enhancing user experience and styling with Linaria.
Hexagon Page Animations
The blog post details the author's evolution of hexagon animations from d3.js to Vue, highlighting improved performance, the adoption of CSS transitions, and solutions for browser compatibility and animation visibility issues.