Adding a header bar animation

I decided to jazz up the header bar!

June 28, 2020

My site was looking a little bland, so I decided to add a simple animation to the header bar. I’m not sure if this is good design (it catches the eye maybe a bit too much) and I will probably come back to change things up again when I get some more experience. At some point I would like to learn more advanced animation - especially the Greensock library. However, for now I am pretty pleased with how this came out!

Here’s how the page looked before:

Before screenshot showing plain header bar
Before screenshot showing plain header bar

I used CodePen to develop the HTML/CSS/vanillaJS (Web Animations API) prototype. When I integrated it into my GatsbyJS website I rewrote the code in JSX and used the React library react-web-animation to run the animations. The react-web-animation library uses the Web Animations API under the hood. I don’t think this is 100% ready for mobile as the shapes appear too big on a smaller screen so I need to investigate SVG scaling*. As a side note, I found it very easy to embed CodePen in my site using the gatsby-remark-codepen library following these instructions.

*Update 1st July 2020: Updated to enable scaling of SVGs. This was enabled by a simple combination of setting the viewBox property of the SVGs and using max-width media queries to set the SVG height and widths. I can also recommend this CSS-Tricks blog post as a nice read on the subject.

© 2021, Katie Baker