I do not have much experience with animations in web design. Hence, I gave it a shot with the awesome react-spring library. React Spring allows smooth and easy animations. For the beginning, I restricted myself to simple animations. You can find the code here and look at the website here. I borrowed the design from this webpage.

What I really like about this website is the smooth header transition when a user scrolls down. The header turns from a greyish color to white and smoothly reduces its height. What’s also nice about the webpage is that the gras and the main heading “come together” on the initial page load in that the header is moving from downwards and the gras is moving upwards. This gives the webpage a dynamic feeling.

There are still problems with the website. For example, the styled components kick in after a second. If this would be a production website, the styled components should render immediately. But since this is just a sketch, I saved myself another hour to figure out how to solve the problem.